iOS 16中自定义Binding<String>绑定TextField失效原因咨询

问题描述 #

基于priceRange属性创建了两个自定义Binding<String>，在iOS 17中可以正常输入值，但在iOS 16中输入时无任何反应，TextField无法接收键盘输入。相关代码如下：

struct AnotherQuestion: View {
    @State
    private var priceRange: ClosedRange<Float> = 500 ... 1000

    private var lowerPriceBinding: Binding<String> {
        Binding {
            let lowerValue = Int(priceRange.lowerBound)
            guard lowerValue != 500 else { return "" }
            return "\(lowerValue)"
        } set: { newValue in
            guard let lowerBound = Float(newValue),
                  500 ... 1000 ~= lowerBound,
                  lowerBound <= priceRange.upperBound else { return }

            priceRange = lowerBound ... priceRange.upperBound
        }
    }

    private var upperPriceBinding: Binding<String> {
        Binding {
            let maxValue = Int(priceRange.upperBound)
            guard maxValue != 1000 else { return "" }
            return "\(maxValue)"
        } set: { newValue in
            guard let upperBound = Float(newValue),
                  upperBound <= 1000,
                  priceRange.lowerBound <= upperBound else { return }

            priceRange = priceRange.lowerBound ... upperBound
        }
    }

    var body: some View {
        VStack {
            HStack {
                Text("Lower: \(priceRange.lowerBound, specifier: \"%0.f\")")
                Spacer()
                Text("Upper: \(priceRange.upperBound, specifier: \"%0.f\")")
                Spacer()
            }

            HStack {
                TextField("Min price", text: lowerPriceBinding)
                TextField("Max price", text: upperPriceBinding)
            }
            .keyboardType(.numberPad)
            .textFieldStyle(.roundedBorder)
        }
        .padding(.horizontal)
    }
}

#Preview {
    AnotherQuestion()
}

原因分析 #

在iOS 16及更早版本中，TextField对自定义Binding<String>的同步逻辑存在限制：

• 当自定义Binding的get闭包返回空字符串时，TextField无法正确维持输入框内容与数据源的同步关系。
• 初始状态下，lowerPriceBinding和upperPriceBinding的get分别返回空字符串（因为初始priceRange的上下界是默认值500和1000），此时用户输入内容后，即使set闭包更新了priceRange，iOS 16的TextField也不会主动重新触发get闭包来更新输入框显示，导致输入内容被“重置”为空，看起来像是无法接收输入。
• iOS 17修复了这一绑定同步的逻辑缺陷，确保输入操作能正确触发Binding的get闭包重新求值，从而正常显示输入内容。

解决方案 #

方案1：修改Binding的get逻辑，避免返回空字符串 #

将默认值的判断逻辑调整为返回对应数字的字符串，确保TextField始终能获取到有效的显示值：

private var lowerPriceBinding: Binding<String> {
    Binding {
        let lowerValue = Int(priceRange.lowerBound)
        return "\(lowerValue)" // 移除空字符串返回逻辑
    } set: { newValue in
        guard let lowerBound = Float(newValue),
              500 ... 1000 ~= lowerBound,
              lowerBound <= priceRange.upperBound else { return }

        priceRange = lowerBound ... priceRange.upperBound
    }
}

private var upperPriceBinding: Binding<String> {
    Binding {
        let maxValue = Int(priceRange.upperBound)
        return "\(maxValue)" // 移除空字符串返回逻辑
    } set: { newValue in
        guard let upperBound = Float(newValue),
              upperBound <= 1000,
              priceRange.lowerBound <= upperBound else { return }

        priceRange = priceRange.lowerBound ... upperBound
    }
}

方案2：使用临时状态变量存储输入内容（更兼容的写法） #

添加独立的@State变量存储输入框的文本，再通过onChange同步到priceRange，这种写法在iOS 16及更早版本中更稳定：

struct AnotherQuestion: View {
    @State
    private var priceRange: ClosedRange<Float> = 500 ... 1000
    @State private var lowerInput = ""
    @State private var upperInput = ""

    var body: some View {
        VStack {
            HStack {
                Text("Lower: \(priceRange.lowerBound, specifier: \"%0.f\")")
                Spacer()
                Text("Upper: \(priceRange.upperBound, specifier: \"%0.f\")")
                Spacer()
            }

            HStack {
                TextField("Min price", text: $lowerInput)
                    .onChange(of: lowerInput) { newValue in
                        guard let lowerBound = Float(newValue),
                              500 ... 1000 ~= lowerBound,
                              lowerBound <= priceRange.upperBound else { return }
                        priceRange = lowerBound ... priceRange.upperBound
                    }
                TextField("Max price", text: $upperInput)
                    .onChange(of: upperInput) { newValue in
                        guard let upperBound = Float(newValue),
                              upperBound <= 1000,
                              priceRange.lowerBound <= upperBound else { return }
                        priceRange = priceRange.lowerBound ... upperBound
                    }
            }
            .keyboardType(.numberPad)
            .textFieldStyle(.roundedBorder)
            .onAppear {
                // 初始化输入框显示默认值
                lowerInput = "\(Int(priceRange.lowerBound))"
                upperInput = "\(Int(priceRange.upperBound))"
            }
        }
        .padding(.horizontal)
    }
}

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