SwiftUI — проблемы с автоматическим переключением фокуса на следующее поле

Как новичок в SwiftUI, я создаю собственное представление OTP, которое работает нормально, но у меня возникла проблема с переключением фокуса на следующее поле. Я ожидаю, что когда пользователь вводит текст, он должен автоматически переключить фокус на следующее доступное поле OTP.

Пожалуйста помоги!!!

struct CustomOtpFieldView: View {
    @Binding var text: String
    @Binding var otpFields: [String]
    var index: Int
    @FocusState private var isFocused: Bool

    var body: some View {
        TextField("", text: $text)
            .focused($isFocused)
            .keyboardType(.numberPad)
            .textContentType(.oneTimeCode)
            .frame(width: 50, height: 50)
            .multilineTextAlignment(.center)
            .background(RoundedRectangle(cornerRadius: 5).stroke(Color.green))
            .onChange(of: text) { newValue in
                let allowedCharacters = "0123456789"
                if !allowedCharacters.contains(newValue) {
                    text = String(newValue.filter { allowedCharacters.contains($0) })
                }
                if text.count > 1 {
                    text = String(text.prefix(1))
                }
                
                handleOtpFieldChange()
            }
            .onAppear {
                if index == 0 {
                    isFocused = true
                }
            }
    }

    private func handleOtpFieldChange() {
        if text.count == 1 && index < otpFields.count - 1 {
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                isFocused = false
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    otpFields[index + 1] = ""
                    isFocused = true
                }
            }
        }
    }
}

@State private var otpFields: [String]

self.fieldsCount = 6
self._otpFields = State(initialValue: Array(repeating: "", count: fieldsCount))

ForEach(0..<fieldsCount, id: \.self) { index in
                    CustomOtpFieldView(text: $otpFields[index], otpFields: $otpFields, index: index)
                }

  Заранее спасибо.

Посмотрите Demysitfy SwiftUI: использование диапазонов небезопасно. Кроме того, любой учебник, которому вы следуете, действительно старый. Посмотрите официальные, SwiftUI сильно изменился. TextField изначально поддерживает Double и Int.

— 29.05.2024 14:11

stackoverflow.com/questions/75388014/…

— 29.05.2024 14:13

ios swift swiftui

29.05.2024 13:54

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Да, то, как вы это делаете, кажется немного странным, вот как я это сделал. Сначала создайте перечисление FocusField, оно будет содержать все наши поля.

enum FocusField {
    case one
    case two
    case three
}

Затем я создал многоразовое представление под названием «SingleDigitTextFieldView», которое выполняет за меня проверку модификатора onChange. Вот как это выглядит.

struct SingleDigitTextFieldView: View {
    @Binding var text: String
    @FocusState.Binding var ff: FocusField?
    var assignedField: FocusField
    var nextField: FocusField?
    
    var body: some View {
        TextField("0", text: $text)
            .focused($ff, equals: assignedField)
            .keyboardType(.numberPad)
            .textContentType(.oneTimeCode)
            .frame(width: 50, height: 50)
            .multilineTextAlignment(.center)
            .background(RoundedRectangle(cornerRadius: 5).stroke(Color.green))
            .onChange(of: text) { oldValue, newValue in
                let exceptedValues = "0123456789"
                if exceptedValues.contains(newValue) {
                    if newValue.count > 0 {
                        ff = nextField
                    }
                }
                else {
                    text = ""
                }
            }
    }
}

Тогда вы можете использовать его вот так.

struct ContentView: View {
    @FocusState private var ff: FocusField?
    @State private var oneText: String = ""
    @State private var twoText: String = ""
    @State private var threeText: String = ""
    
    var body: some View {
        HStack {
            SingleDigitTextFieldView(
                text: $oneText,
                ff: $ff,
                assignedField: .one,
                nextField: .two
            )
            
            SingleDigitTextFieldView(
                text: $twoText,
                ff: $ff,
                assignedField: .two,
                nextField: .three
            )
            
            SingleDigitTextFieldView(
                text: $threeText,
                ff: $ff,
                assignedField: .three,
                nextField: nil
            )
        }
    }
}

Вы можете выполнить дополнительную проверку в модификаторе onChange. Приятного кодирования.

Большое спасибо. это мне очень помогает, но сейчас я рассматриваю возможность создания одного компонента, в котором будет отправляться параметр fieldCount (количество полей OTP), который создает поля OTP соответственно параметру fieldCount.

— 31.05.2024 09:07

29.05.2024 14:56