带有动画的 TextField 使应用程序崩溃并失去焦点

Question

最小的可重现示例：

在SceneDelegate.swift:

let contentView = Container()

在ContentView.swift:

struct SwiftUIView: View {
    @State var text: String = ""

    var body: some View {
        VStack {
            CustomTextFieldView(text: $text)
        }
    }
}

struct Container: View {

    @State var bool: Bool = false
    @State var text: String = ""

    var body: some View {

        Button(action: {
            self.bool.toggle()
        }) {
            Text("Sheet!")
        }
        .sheet(isPresented: $bool) {
            SwiftUIView()
        }
    }
}

在CustomTextField.swift:

struct CustomTextFieldView: View {

    @Binding var text: String
    @State var editing: Bool = false


    var body: some View {
        Group {
            if self.editing {
                textField
                    .background(Color.red)
            } else {
                ZStack(alignment: .leading) {
                    textField
                        .background(Color.green)
                    Text("Placeholder")
                }
            }
        }
        .onTapGesture {
            withAnimation {
                self.editing = true
            }
        }
    }

    var textField: some View {
        TextField("", text: $text)
    }

问题：

运行上述代码并聚焦文本字段后，应用程序崩溃。我注意到的一些事情：

1. 如果我删除 withAnimation 代码或 CustomTextField 文件中的 ZStack，应用不会崩溃，但 TextField 会失去焦点。
2. 如果我删除 SwiftUIView 中的 VStack，应用不会崩溃，但 TextField 会失去焦点。
3. 如果我使用 NavigationLink 或在没有工作表的情况下显示 TextField，应用不会崩溃，但 TextField 会失去焦点。

问题：

• 这是当前版本的 SwiftUI 的问题吗？
• 是否有使用 SwiftUI 解决此问题的方法？我想远离 尽可能多地查看可表示对象。
• 由于状态更改而重新计算正文后，如何保持 TextField 的焦点？

Answer 1

1. 正文后如何保持 TextField 的焦点 由于状态变化而重新计算？

你有两个。 两个不同的TextField不能同时处于编辑状态。

Asperi 建议的方法是唯一可行的方法。

你的代码崩溃的原因不容易解释，但在当前的 SwiftUI 中是预期的。

你必须明白，Group 不是一个标准的容器，它就像一个“块”，你可以在上面应用一些修饰符。在 ViewBuilder 中移除 Group 并使用包裹体

struct CustomTextFieldView: View {

    @Binding var text: String
    @State var editing: Bool = false

    @ViewBuilder
    var body: some View {
            if self.editing {
                TextField("", text: $text)
                    .background(Color.red)
                    .onTapGesture {
                        self.editing.toggle()
                }
            } else {
                ZStack(alignment: .leading) {
                    TextField("", text: $text)
                        .background(Color.green)
                        .onTapGesture {
                                self.editing.toggle()
                        }
                }
        }

    }
}

代码将停止崩溃，但还有其他问题，键盘将立即关闭。这是由于应用了轻击手势。

所以，不管你信不信，你只能使用一个 TextField。

struct CustomTextFieldView: View {

    @Binding var text: String
    @State var editing = false

    var textField: some View {
        TextField("", text: $text, onEditingChanged: { edit in
            self.editing = edit
        })
    }

    var body: some View {

        textField.background(editing ? Color.green : Color.red)

    }
}

根据需要在代码的其他地方使用此自定义文本字段

Answer 2

为CustomTextFieldView 尝试以下操作（测试并适用于 Xcode 11.2 / iOS 13.2）

struct CustomTextFieldView: View {

    @Binding var text: String
    @State var editing: Bool = false


    var body: some View {
        TextField("", text: $text)
            .background(self.editing ? Color.red : Color.green)
            .onTapGesture {
                withAnimation {
                    self.editing = true
                }
            }
    }
}

由于状态改变而重新计算body后如何保持TextField的焦点？

你没有失去焦点，你只是删除了整个文本字段，所以解决方案不是替换文本字段，而是修改它的属性，即背景。放到 ZStack 里面没问题，但要留一个。