增加可点击的 Textfield() 大小答案

【问题标题】：Increasing the clickable Textfield() size增加可点击的 Textfield() 大小
【发布时间】：2023-03-10 13:00:01
【问题描述】：

我正在尝试构建一个 SwiftUI Textfield，它应该可以在整个灰色区域中单击以输入文本（为了更好地可视化，我做了一个红框）。

作为占位符的“搜索”一词应在此框内居中以使其看起来更好。

我的问题是，在“搜索”一词下方和上方的整个区域中，该框不可点击。

struct ContentView: View {

@State private var searchText = ""

var body: some View {
    HStack {
        Image(systemName: "magnifyingglass")
        Spacer()

        TextField("Search", text: self.$searchText).foregroundColor(.primary)
            .frame(height: 40).border(Color.red) //This line is just to show what I want to achive to be clickable.
        Spacer()
    }
    .foregroundColor(.secondary)
    .background(Color(.secondarySystemBackground))
    .cornerRadius(10.0)
}
}

【问题讨论】：

很遗憾，您不能这样做。但是我会看看我是否可以想出一个解决方法，如果我可以的话，我会回复你的:)

标签： ios swift xcode swiftui

【解决方案1】：

目前似乎不可能，但您可以自己实现类似的东西。

您可以创建一个自定义文本字段并添加一个值，使其成为当用户点击您的文本字段周围区域时的第一响应者。

所以首先我们要做的是创建一个UIViewRepresentable 来制作我们的自定义TextField

struct CustomTextField: UIViewRepresentable {

    class Coordinator: NSObject, UITextFieldDelegate {

        @Binding var text: String
        var didBecomeFirstResponder = false

        init(text: Binding<String>) {
            _text = text
        }

        func textFieldDidChangeSelection(_ textField: UITextField) {
            text = textField.text ?? ""
        }

    }

    @Binding var text: String
    var isFirstResponder: Bool = false

    func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
        let textField = UITextField(frame: .zero)
        textField.delegate = context.coordinator
        return textField
    }

    func makeCoordinator() -> CustomTextField.Coordinator {
        return Coordinator(text: $text)
    }

    func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
        uiView.text = text
        if isFirstResponder && !context.coordinator.didBecomeFirstResponder  {
            uiView.becomeFirstResponder()
            context.coordinator.didBecomeFirstResponder = true
        }
    }
}

现在我们要做的就是实现我们的CustomTextField，如下所示：

struct ContentView: View {
    @State private var searchText = ""
    @State private var clickableTextField = false
    var body: some View {
        
        
        HStack {
                Image(systemName: "magnifyingglass")
                Spacer()

            CustomTextField(text: $searchText, isFirstResponder: clickableTextField)
                .foregroundColor(.primary)
                .frame(height: 40).border(Color.red)
                .border(Color.red)
            
                Spacer()
            }
            .foregroundColor(.secondary)
            .background(Color(.secondarySystemBackground))
            .cornerRadius(10.0)
        .onTapGesture {
            self.clickableTextField = true
        }
        
    }
}

瞧！现在您的TextField 可以按您的要求点击了。

【讨论】：