如何避免SwiftUI TextField的onChange出现循环依赖？

问题场景 #

你在SwiftUI视图里用两个TextField分别绑定@State变量amount和percentage，修改其中一个值时，对应的onChange方法会修改另一个变量，进而触发对方的onChange，形成无限循环调用。

可行解决方案 #

方案1：用标志位拦截循环触发 #

添加两个布尔状态变量，标记当前是否是代码主动修改值，以此跳过不必要的onChange回调：

struct ContentView2: View {
    @State private var amount: String = ""
    @State private var percentage: String = ""
    // 标记是否是代码修改amount，避免触发onChange
    @State private var isUpdatingAmount = false
    // 标记是否是代码修改percentage，避免触发onChange
    @State private var isUpdatingPercentage = false
    
    var body: some View {
        VStack {
            TextField("enter value here", text: $amount)
                .onChange(of: amount) { newValue in
                    guard !isUpdatingAmount else {
                        isUpdatingAmount = false
                        return
                    }
                    onAmountChange(newValue)
                }
            
            TextField("enter percentage here", text: $percentage)
                .onChange(of: percentage) { newValue in
                    guard !isUpdatingPercentage else {
                        isUpdatingPercentage = false
                        return
                    }
                    onPercentageChange(newValue)
                }
        }
        .padding()
    }
    
    func onAmountChange(_ newValue: String) {
        isUpdatingPercentage = true
        percentage = newValue
    }
    
    func onPercentageChange(_ newValue: String) {
        isUpdatingAmount = true
        amount = newValue
    }
}

每次代码主动修改变量前先设置标志位，onChange里检查到标志位就重置并跳过逻辑，从根源切断循环。

方案2：自定义Binding（推荐） #

直接自定义Binding，把值变化后的逻辑写在setter里，避开onChange的自动触发：

struct ContentView2: View {
    @State private var amount: String = ""
    @State private var percentage: String = ""
    
    private var amountBinding: Binding<String> {
        Binding(
            get: { amount },
            set: { newValue in
                amount = newValue
                // 直接在这里处理amount变化后的逻辑，无需依赖onChange
                percentage = newValue
            }
        )
    }
    
    private var percentageBinding: Binding<String> {
        Binding(
            get: { percentage },
            set: { newValue in
                percentage = newValue
                // 直接在这里处理percentage变化后的逻辑，无需依赖onChange
                amount = newValue
            }
        )
    }
    
    var body: some View {
        VStack {
            TextField("enter value here", text: amountBinding)
            TextField("enter percentage here", text: percentageBinding)
        }
        .padding()
    }
}

自定义Binding的setter只会在用户输入时触发，代码内部修改变量不会触发对方的setter，自然避免循环，代码也更简洁。

方案3：ViewModel+Combine（适合复杂场景） #

如果后续业务逻辑更复杂，把状态和逻辑抽离到ViewModel，用Combine控制回调触发：

import Combine

class ContentViewModel: ObservableObject {
    @Published var amount: String = ""
    @Published var percentage: String = ""
    
    private var cancellables = Set<AnyCancellable>()
    
    init() {
        // 监听amount变化，处理赋值逻辑
        $amount
            .sink { [weak self] newValue in
                guard let self = self else { return }
                self.percentage = newValue
            }
            .store(in: &cancellables)
        
        // 监听percentage变化，处理赋值逻辑
        $percentage
            .sink { [weak self] newValue in
                guard let self = self else { return }
                self.amount = newValue
            }
            .store(in: &cancellables)
    }
}

struct ContentView2: View {
    @StateObject private var viewModel = ContentViewModel()
    
    var body: some View {
        VStack {
            TextField("enter value here", text: $viewModel.amount)
            TextField("enter percentage here", text: $viewModel.percentage)
        }
        .padding()
    }
}

这种方式可以通过Combine的操作符（比如debounce、filter）进一步控制触发时机，也能更好地分离视图和业务逻辑，适合复杂场景。

总结 #

• 简单场景优先用自定义Binding，代码直观且改动小；
• 轻量需求用标志位拦截，快速解决循环问题；
• 复杂业务逻辑推荐ViewModel+Combine，扩展性更强。

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