SwiftUI双向联动TextField：温度转换器实时同步问题

问题描述 #

我正尝试使用SwiftUI编写一款温度转换器，期望输入摄氏度时能实时同步更新华氏度数值，反之亦然。
尝试使用onChange修饰符时出现循环更新问题：修改摄氏度后触发onChange更新华氏度，随即华氏度的onChange又触发摄氏度更新，导致输入「1」会变成「1.000」，无法输入多位数。
使用onEditingChange的实现代码仅能在TextField失去焦点时更新另一数值，不符合实时同步需求：

import SwiftUI

struct ContentView: View {
    @State private var temperatureCelsius: String = "0"
    @State private var temperatureFahrenheit: String = "32"
    
    var body: some View {
        VStack(alignment: .center) {
            Text("Temperature Converter")
                .font(.system(size: 36))
            Spacer()
            HStack {
                HStack {
                    Spacer()
                    TextField("     ",
                              text: $temperatureCelsius,
                              onEditingChanged: { newValue in
                                temperatureFahrenheit = String(convertToFahrenheit(celsiusTemperature: Float(temperatureCelsius) ?? 0.0))
                              }
                        )
                        .keyboardType(.decimalPad)
                        .multilineTextAlignment(.trailing)
                        .fixedSize()
                    Text("ºC")
                    
                }
                Image(systemName: "arrow.left.arrow.right")
                    .imageScale(.large)
                    .foregroundColor(.secondary)
                HStack {
                    TextField("     ",
                              text: $temperatureFahrenheit,
                              onEditingChanged: { newValue in
                                temperatureCelsius = String(convertToCelsius(fahrenheitTemperature: Float(temperatureFahrenheit) ?? 0.0))
                              }
                        )
                        .keyboardType(.decimalPad)
                        .multilineTextAlignment(.trailing)
                        .fixedSize()
                        
                    Text("ºF")
                    Spacer()
                }
            }
            
            
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

理想方案是能够区分用户手动修改与代码自动修改的场景，从而实现正常的双向数据绑定同步。

解决方案 #

核心思路是通过标记当前正在编辑的输入框，避免代码自动更新触发循环。具体实现如下：

import SwiftUI

enum Field {
    case celsius, fahrenheit
}

struct ContentView: View {
    @State private var temperatureCelsius: String = "0"
    @State private var temperatureFahrenheit: String = "32"
    @State private var activeField: Field?
    
    // 摄氏度转华氏度，格式化输出
    private func convertToFahrenheit(celsius: Float) -> String {
        let fahrenheit = celsius * 9/5 + 32
        return formatTemperature(fahrenheit)
    }
    
    // 华氏度转摄氏度，格式化输出
    private func convertToCelsius(fahrenheit: Float) -> String {
        let celsius = (fahrenheit - 32) * 5/9
        return formatTemperature(celsius)
    }
    
    // 处理数值显示，避免冗余小数位
    private func formatTemperature(_ value: Float) -> String {
        let roundedValue = round(value * 1000) / 1000
        return roundedValue.truncatingRemainder(dividingBy: 1) == 0 ? String(Int(roundedValue)) : String(roundedValue)
    }
    
    var body: some View {
        VStack(alignment: .center) {
            Text("Temperature Converter")
                .font(.system(size: 36))
            Spacer()
            HStack {
                HStack {
                    Spacer()
                    TextField("Enter Celsius",
                              text: $temperatureCelsius)
                        .keyboardType(.decimalPad)
                        .multilineTextAlignment(.trailing)
                        .fixedSize()
                        .onTapGesture {
                            activeField = .celsius
                        }
                        .onChange(of: temperatureCelsius) { newValue in
                            guard activeField == .celsius else { return }
                            // 临时取消活跃标记，防止触发反向更新
                            activeField = nil
                            let celsiusValue = Float(newValue) ?? 0.0
                            temperatureFahrenheit = convertToFahrenheit(celsius: celsiusValue)
                            // 恢复活跃标记，继续接收用户输入
                            activeField = .celsius
                        }
                    Text("ºC")
                }
                Image(systemName: "arrow.left.arrow.right")
                    .imageScale(.large)
                    .foregroundColor(.secondary)
                HStack {
                    TextField("Enter Fahrenheit",
                              text: $temperatureFahrenheit)
                        .keyboardType(.decimalPad)
                        .multilineTextAlignment(.trailing)
                        .fixedSize()
                        .onTapGesture {
                            activeField = .fahrenheit
                        }
                        .onChange(of: temperatureFahrenheit) { newValue in
                            guard activeField == .fahrenheit else { return }
                            activeField = nil
                            let fahrenheitValue = Float(newValue) ?? 0.0
                            temperatureCelsius = convertToCelsius(fahrenheit: fahrenheitValue)
                            activeField = .fahrenheit
                        }
                    Text("ºF")
                    Spacer()
                }
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方案说明 #

• 活跃字段标记：用activeField枚举跟踪当前用户正在编辑的输入框，只有对应字段活跃时才处理转换逻辑，避免代码自动更新触发循环。
• 临时取消标记：更新另一温度值时，临时将activeField设为nil，防止被更新字段的onChange触发反向转换，完成后恢复标记不影响后续输入。
• 数值格式化：formatTemperature函数处理显示逻辑，整数时显示整数，小数时保留必要位数，避免出现1.000这类冗余格式。

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