SwiftUI - 检测文本字段中的变化

Posted 2023-02-24

【中文标题】SwiftUI - 检测文本字段中的变化

【英文标题】：SwiftUI - detect change in Textfield

【发布时间】：2021-10-04 07:29:29

【问题描述】：

我希望当用户在文本字段中编辑信息时它会监听更改 -> 保存按钮将从灰色变为蓝色并启用。如果用户没有编辑过信息，保存按钮将失效。

我希望当用户在文本字段中编辑信息时它会监听更改 -> 保存按钮将从灰色变为蓝色。如果用户没有编辑过信息，保存按钮会失效

【问题讨论】：

这是否回答了您的问题***.com/a/68055969/12299030？

但我不知道如何为保存按钮实现它

对你提出的问题使用 onChange。

你能在我的代码上编辑它吗？

【参考方案1】：

这里有一个简单的例子，可能对你有用，它使用了一些 cmets 建议。有 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：

当您的 Textfield 中已有内容时，这是一种使条件生效的方法：

// 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())
    

【讨论】：

当我的 Textfield 中已有内容时，我不知道如何获取条件

@David 如果您的文本字段已有内容，请检查连接到文本字段的变量。

当 Textfield 中已有内容时，用一种可行的方法更新了我的答案。

更新了我的答案。如果这个答案有帮助，请标记它。