SwiftUI中如何在用户输入时清洗TextField的内容？

问题背景 #

需要实现一个TextField：用户输入以8开头时，自动移除开头的8。最初用@Published属性的didSet处理，仅在iOS16及以下生效——逻辑执行后值已修改，但TextField的UI不更新。尝试willSet导致无限递归，订阅$input的效果和didSet一致。目前通过视图的onChange调用ViewModel的处理函数能解决问题，但代码冗余，希望找到更优实现方式。

初始实现（iOS16及以下有效，iOS17+UI不更新） #

final class ViewModel: ObservableObject {
    @Published var input = "" {
        didSet {
            if input.hasPrefix("8") {
                input = String(input.dropFirst())
            }
        }
    }
}

struct ContentView: View {
    @StateObject var viewModel: ViewModel = ViewModel()

    var body: some View {
        TextField(
            "",
            text: $viewModel.input,
            prompt: Text("My cats don't like 8")
        )
        .padding()
        .background(Color.gray)
    }
}

当前可行但冗余的方案 #

final class ViewModel: ObservableObject {
    @Published var input = ""

    func processInput(_ newValue: String) {
        if newValue.hasPrefix("8") {
            input = String(newValue.dropFirst())
        }
    }
}

struct ContentView: View {
    @StateObject var viewModel: ViewModel = ViewModel()

    var body: some View {
        TextField(
            "",
            text: $viewModel.input,
            prompt: Text("8s are so round and nice")
        )
        .onChange(of: viewModel.input) { oldValue, newValue in
            viewModel.processInput(newValue)
        }
        .padding()
        .background(Color.gray)
    }
}

更优解决方案：自定义绑定（Custom Binding） #

通过自定义绑定拦截输入值的设置过程，实时清洗后再同步到数据源，既解决UI更新问题，又避免冗余代码。

方案1：视图内直接创建自定义绑定 #

适合简单场景，代码紧凑：

final class ViewModel: ObservableObject {
    @Published var input = ""
}

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        let inputBinding = Binding(
            get: { viewModel.input },
            set: { newValue in
                let cleanedValue = newValue.hasPrefix("8") ? String(newValue.dropFirst()) : newValue
                viewModel.input = cleanedValue
            }
        )

        TextField(
            "",
            text: inputBinding,
            prompt: Text("No leading 8s allowed")
        )
        .padding()
        .background(Color.gray)
    }
}

方案2：ViewModel封装绑定（符合MVVM架构） #

将清洗逻辑封装在ViewModel中，保持视图层简洁，便于复用和测试：

final class ViewModel: ObservableObject {
    @Published private var internalInput = ""
    
    var inputBinding: Binding<String> {
        Binding(
            get: { self.internalInput },
            set: { newValue in
                self.internalInput = newValue.hasPrefix("8") ? String(newValue.dropFirst()) : newValue
            }
        )
    }
}

struct ContentView: View {
    @StateObject var viewModel = ViewModel()

    var body: some View {
        TextField(
            "",
            text: viewModel.inputBinding,
            prompt: Text("No leading 8s allowed")
        )
        .padding()
        .background(Color.gray)
    }
}

方案说明 #

自定义绑定直接接管输入值的更新流程，清洗后再同步到ViewModel的属性，完美解决iOS17+中didSet无法触发UI更新的问题。两种方案可根据场景选择：方案1适合快速实现，方案2更贴合MVVM架构，逻辑内聚性更强。

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