SwiftUI - 檢測文本字段中的變化

Question

我希望當用戶在文本字段中編輯信息時，它會監聽更改 -> 保存按鈕將從灰色變為藍色並啟用。 如果用戶尚未編輯信息，則保存按鈕將禁用。

我希望當用戶在文本字段中編輯信息時，它會監聽更改 -> 保存按鈕將從灰色變為藍色。 如果用戶沒有編輯信息，保存按鈕將禁用

Answer 1

這是一個簡單的例子，可能對你有用，使用一些評論建議。 有3個主要元素，條件，禁用和顏色。

struct ContentView: View {
    @State private var password = ""
    @State private var passwordRepeat = ""
    
    // here the condition you want
    var isConfirmed: Bool { 
        if !password.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty &&
            !passwordRepeat.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty &&
            (password == passwordRepeat) {
            return true
        } else {
            return false
        }
    }
    
    var body: some View {
        VStack {
            SecureField("password", text: $password)
            SecureField("password confirm", text: $passwordRepeat)
            Button(action: { } ) {
                Text("SAVE").accentColor(.white)
            }
            .disabled(!isConfirmed) // <-- here to enable/disable the button
            .padding(20)
            .background(isConfirmed ? Color.green : Color.gray) // <-- here to change color of the button
            .cornerRadius(20)
        }.frame(width: 333)
        .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}

編輯1：

當您的文本字段中已經包含內容時，這是一種使條件起作用的方法：

// your ProfileEditorRow equivalent
struct ContentView: View {
    @ObservedObject var profileViewModel: ProfileViewModel
    let refUserName: String // <-- reference user name
    
    init(profileViewModel: ProfileViewModel) {
        self.profileViewModel = profileViewModel
        self.refUserName = profileViewModel.user.name // <-- here keep the initial user name
    }
    
    var isCondition: Bool {
        return (refUserName == profileViewModel.name) // <-- here test for change
    }
    
    var body: some View {
        VStack {
            TextField("test",text: $profileViewModel.user.name)
            Button(action: { print("----> SAVE") } ) {
                Text("SAVE").accentColor(.white)
            }
            .disabled(isCondition) // <-- here to enable/disable the button
            .padding(20)
            .background(isCondition ? Color.gray : Color.green) // <-- here to change color of the button
            .cornerRadius(20)
        }.frame(width: 333)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }

EDIT2：條件中具有多個元素的樣本

你可能有一個帶有姓名、生日等的User結構......使用這個：

struct User {
    var name
    var birthday
    var gender
    // ....
}

struct ContentView: View {
    @ObservedObject var profileViewModel: ProfileViewModel
    let refUser: User // <-- reference user
    
    init(profileViewModel: ProfileViewModel) {
        self.profileViewModel = profileViewModel
        self.refUser = profileViewModel.user // <-- here keep the initial user values
    }
    
    var isCondition: Bool {
        return (refUser.name == profileViewModel.user.name) &&
        (refUser.birthday == profileViewModel.user.birthday)
    }
    
    var body: some View {
        VStack {
            TextField("name",text: $profileViewModel.user.name)
            TextField("birthday",text: $profileViewModel.user.birthday)
            Button(action: { print("----> SAVE") } ) {
                Text("SAVE").accentColor(.white)
            }
            .disabled(isCondition) // <-- here to enable/disable the button
            .padding(20)
            .background(isCondition ? Color.gray : Color.green) // <-- here to change color of the button
            .cornerRadius(20)
        }.frame(width: 333)
            .textFieldStyle(RoundedBorderTextFieldStyle())
    }
}