SwiftUI Focus State API 环境变量不起作用

Question

当我们想要观察 SwiftUI 文本字段的焦点状态时，环境值 isFocused 似乎不起作用。除了将值传递给 TextFieldStyle 的 init（我们必须为每个 Textfield 执行此操作）之外，还有其他方法可以做到这一点吗？在设备上也不起作用。

当文本字段的焦点状态发生变化时，更改其外观的首选方法是什么？

例子：

SwiftUI TextFieldStyle 定义如下：

struct MyTextFieldStyle: TextFieldStyle {
    @Environment(\.isFocused) var isFocused: Bool

    func _body(configuration: TextField<_Label>) -> some View {
        configuration
            .padding()
            .overlay(
                RoundedRectangle(
                    cornerRadius: 10.0, style: .continuous
                )
                .stroke(isFocused ? .green : .gray, lineWidth: 3)
            )
            .accentColor(Color(uiColor: .white))
    }
}

#if DEBUG
private struct TestView: View {
    @FocusState private var focusedTextfield: FocusField?

    enum FocusField: Hashable {
        case textfield1, textfield2
    }

    var body: some View {
        VStack(spacing: 16) {
            TextField("hello", text: .constant("Hi"))
                .textFieldStyle(MyTextFieldStyle())
                .focused($focusedTextfield, equals: .textfield1)

            TextField("hello", text: .constant("Hi"))
                .textFieldStyle(MyTextFieldStyle())
                .focused($focusedTextfield, equals: .textfield2)
        }.onAppear {
            focusedTextfield = .textfield1
        }
    }
}

struct MyTextfieldStyle_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            TestView()
        }
    }
}
#endif

//编辑：基于/sf/answers/5046509121/的工作解决方案

struct MyTextFieldStyle: TextFieldStyle {
    @FocusState var isFocused: Bool

    func _body(configuration: TextField<_Label>) -> some View {
        configuration
            .padding()
            .focused($isFocused)
            .overlay(
                RoundedRectangle(
                    cornerRadius: 10.0, style: .continuous
                )
                .stroke(isFocused ? .green : .gray, lineWidth: 3)
            )
            .accentColor(Color(uiColor: .white))
    }
}

#if DEBUG
private struct TestView: View {
    @FocusState private var focusedTextfield: FocusField?

    enum FocusField: Hashable {
        case textfield1, textfield2
    }

    var body: some View {
        VStack(spacing: 16) {
            TextField("hello", text: .constant("Hi"))
                .textFieldStyle(MyTextFieldStyle())
                .focused($focusedTextfield, equals: .textfield1)

            TextField("hello", text: .constant("Hi"))
                .textFieldStyle(MyTextFieldStyle())
                .focused($focusedTextfield, equals: .textfield2)
        }.onAppear {
            DispatchQueue.main.async {
                focusedTextfield = .textfield1
            }
        }
    }
}

struct MyTextFieldStyle_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            TestView()
        }
    }
}
#endif

Answer 1

您遇到了几个不同的问题：

1. 据我所知，没有自定义 TextFieldStyles 的公共协议。但是您可以使用相同的行为创建自己的 TextField 结构。
2. 在此结构中，您可以使用另一个本地@FocusState变量。我没有让环境变量工作，但是这个可以。
3. 要在主视图中设置初始焦点，您必须等待一段时间使用asyncAfter

struct MyTextField: View {

    @FocusState private var isFocused: Bool

    let title: String
    @Binding var text: String
    
    init(_ title: String, text: Binding<String>) {
        self.title = title
        self._text = text
    }
    
    var body: some View {
        TextField(title, text: $text)
            .focused($isFocused) // important !
            .padding()
            .overlay(
                RoundedRectangle(
                    cornerRadius: 10.0, style: .continuous
                )
                .stroke(isFocused ? .green : .gray, lineWidth: 3)
            )
            .accentColor(Color(uiColor: .red))
    }
}


struct ContentView: View {
    
    @FocusState private var focusedTextfield: FocusField?
    
    enum FocusField: Hashable {
        case textfield1, textfield2
    }
    
    @State private var input1 = "Hi"
    @State private var input2 = "Hi2"

    var body: some View {
        VStack(spacing: 16) {
            MyTextField("hello", text: $input1)
                .focused($focusedTextfield, equals: .textfield1)
            
            MyTextField("hello", text: $input2)
                .focused($focusedTextfield, equals: .textfield2)
            
            // test for changing focus
            Button("Field 1") { focusedTextfield = .textfield1}
            Button("Field 2") { focusedTextfield = .textfield2}

        }
        .padding()
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                focusedTextfield = .textfield1
            }
        }
    }
}