Блог

Главная - Вопросы по программированию - Увеличение размера кликабельного текстового поля ()

Увеличение размера кликабельного текстового поля ()

#ios #swift #xcode #swiftui

#iOS #swift #xcode #swiftui

Вопрос:

Я пытаюсь создать 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)
}
}

Комментарии:

1. К сожалению, вы не можете этого сделать. Однако я посмотрю, смогу ли я придумать обходной путь, если я это сделаю, я вернусь к вам 🙂

Ответ №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 amp;amp; !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 сайт доступен для кликабельности, как вы и просили.

Результат