如何从 SwiftUI TextField 中修剪空格

Question

我是 SwiftUI 的新手。我正在尝试修剪文本字段中输入的文本中的空格。

struct ContentView: View {
    @State private var name = "" {
        didSet {
            print("didSet, name = '\(name)'")
        }
    }
    var body: some View {
        VStack() {
            TextField("Name", text: $name, onEditingChanged: { (didBegin) in
                if !didBegin {
                    print("editing did end. name before trim = '\(name)'")
                    name = name.trimWhiteSpace()
                    print("editing did end. name after trim = '\(name)'")
                }
            }, onCommit: {
                print("committed. name before trim = '\(name)'")
                name = name.trimWhiteSpace()
                print("committed. name after trim = '\(name)'")
            })
            .textFieldStyle(.roundedBorder)
            Text("name = '\(name)'")
        }
        .padding([.leading, .trailing])
    }
}
extension String {
    func trimWhiteSpace() -> String {
        return self.trimmingCharacters(in: .whitespacesAndNewlines)
    }
}

当我输入带有前导空格和尾随空格的名称并按 Return 键时，以下是输出：

承诺。修剪前的名字 = 'Bob' <- leading and trailing spaces
didSet，名称 = '鲍勃' <- trim was called, looks good
坚定的。修剪后的名字 = 'Bob' <- name appears to be trimmed
编辑确实结束了。修剪前的名字 = 'Bob' <- but wait, it's not trimmed
didSet，名称 = '鲍勃' <- trim was called (again), looks good (again)
编辑确实结束了。修剪后的名字 = 'Bob' <- name appears to be trimmed

问题 1：请注意，

name

已在

onCommit

中被修剪。但在那之后

onEditingChanged

运行并且名称不再被修剪。这对我来说似乎很奇怪。谁能解释一下吗？

此外，按回车键后，以下视图仍带有前导空格和尾随空格：

问题2：这是否表明

name

此时实际上还没有被修剪？或者

name

被修剪但不知何故视图根本没有更新？不管怎样，我该如何让它发挥作用？

Answer 1

init(_:text:onEditingChanged:onCommit:) 已弃用（请参阅 AppleDoc），因此我将通过使用 focusState 来实现 onEditingChanged 行为，从而使用 Apple 的建议。 以下示例在文本字段的焦点更改时修剪空白：

    @State private var name = "" {
        didSet {
            print("didSet, name = '\(name)'")
        }
    }
    @FocusState private var focusState: Bool
    
    var body: some View {
        VStack() {
            TextField("Name", text: $name)
                .focused($focusState)
                .textFieldStyle(.roundedBorder)
                .onChange(of: focusState) {
                    self.name = name.trimWhiteSpace()
                }
            Text("name = '\(name)'")
        }
        .padding([.leading, .trailing])
    }