SwiftUI 如何监听TextField内容变化，动态控制保存按钮状态及样式

核心逻辑是通过两个状态值的对比控制按钮状态：维护一份原始初始值，以及和TextField绑定的当前输入值，利用SwiftUI状态驱动视图刷新的特性，自动根据两个值的相等性切换按钮的可用状态。

单TextField场景完整示例 #

import SwiftUI

struct EditView: View {
    // 存储初始原始值，可根据业务需求改为外部传入的参数
    private let originalInput: String = "默认初始内容"
    // 绑定TextField的当前输入值
    @State private var currentInput: String = ""
    
    var body: some View {
        VStack(spacing: 24) {
            TextField("请输入内容", text: $currentInput)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)
            
            Button {
                // 在此处添加保存的业务逻辑
                print("执行保存操作，内容为：\(currentInput)")
            } label: {
                Text("保存")
                    .fontWeight(.medium)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                    .background(.ultraThinMaterial)
                    .cornerRadius(8)
                    .padding(.horizontal)
            }
            // 控制按钮是否禁用：当前值与初始值一致时禁用
            .disabled(currentInput == originalInput)
            // 控制按钮文字颜色：禁用时为灰色，可用时为蓝色
            .foregroundColor(currentInput == originalInput ? .gray : .blue)
        }
        .onAppear {
            // 页面加载时将初始值赋值给当前输入值，保证初始状态下按钮禁用
            currentInput = originalInput
        }
        .padding(.vertical, 20)
    }
}

扩展场景说明 #

• 多TextField场景：将所有输入框的当前值和对应初始值的对比结果做逻辑与运算即可，示例判断逻辑：

  .disabled(currentName == originalName && currentPhone == originalPhone && currentAddress == originalAddress)
  

• 新增额外校验规则：如果需要同时满足格式校验、非空校验等要求，直接将校验规则添加到disabled的判断条件中即可，比如增加非空校验：

  .disabled(currentInput == originalInput || currentInput.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty)
  

内容的提问来源于stack exchange，提问作者David