@FocusState — vad är det, hantering av fokus och tangentbord i SwiftUI

Co je @FocusState ve SwiftUI

@FocusState — je property wrapper, který propojuje stav fokusu s konkrétním vstupním polem nebo jiným focusable prvkem ve SwiftUI. Na rozdíl od UIKit, kde se řízení fokusu děje prostřednictvím metod becomeFirstResponder a resignFirstResponder, SwiftUI používá deklarativní přístup: deklarujete stav (@FocusState) a propojíte jej s prvkem pomocí modifikátoru .focused(). Změna stavu automaticky mění fokus.

Před objevením @FocusState v iOS 15 museli vývojáři vytvářet UIViewRepresentable obálky kolem UITextField nebo používat knihovny třetích stran. @FocusState je integrován přímo do SwiftUI a funguje s TextField, TextEditor, SecureField a SearchField. To činí kód čistším, snižuje počet UIKit mostů a zlepšuje testovatelnost.

Podle WWDC Session 10136 — What's new in SwiftUI (2024) @FocusState používá systém preference klíčů SwiftUI pro předávání informací o fokusu mezi prvky. Když pole obdrží fokus, SwiftUI automaticky aktualizuje propojenou @FocusState vlastnost, což umožňuje reagovat na změny fokusu v kódu.

Řízení fokusu s Bool

Nejjednodušší způsob použití @FocusState — typ Bool. Když je pole ve fokusu, vlastnost je true. Když fokus odejde — false. Můžete nuceně nastavit fokus přiřazením true nebo jej resetovat přiřazením false.

struct LoginForm: View {
    @State var email = ""
    @FocusState var isEmailFocused: Bool
    
    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .focused($isEmailFocused)
            
            Button("Visa tangentbord") {
                isEmailFocused = true
            }
            Button("Dölj tangentbord") {
                isEmailFocused = false
            }
        }
    }
}

V tomto příkladu isEmailFocused se automaticky stane true, když uživatel klepne na textové pole, a false, když je klávesnice skryta. Tlačítka umožňují programové řízení fokusu — užitečné pro vlastní klávesnice, tlačítka „Další” a situace, kdy je třeba po odeslání formuláře vynutit skrytí klávesnice.

Řízení fokusu s Enum pro více polí

Pro formuláře s více poli @FocusState podporuje enum odpovídající protokolu FocusStateValue (nebo Hashable). Každý case enumu odpovídá konkrétnímu poli. To umožňuje přepínání fokusu mezi poli — například při stisknutí „Další” na klávesnici přejít na další pole.

struct RegistrationForm: View {
    enum Field: Hashable {
        case email
        case password
        case confirmPassword
    }
    
    @State var email = ""
    @State var password = ""
    @State var confirmPassword = ""
    @FocusState var focusedField: Field?
    
    var body: some View {
        Form {
            TextField("Email", text: $email)
                .focused($focusedField, equals: .email)
                .onSubmit { focusedField = .password }
            
            SecureField("Password", text: $password)
                .focused($focusedField, equals: .password)
                .onSubmit { focusedField = .confirmPassword }
            
            SecureField("Confirm", text: $confirmPassword)
                .focused($focusedField, equals: .confirmPassword)
                .onSubmit { submitForm() }
        }
    }
}

Všimněte si modifikátoru .onSubmit — je volán, když uživatel stiskne „Return” na klávesnici. Uvnitř .onSubmit přepínáme focusedField na další pole, což automaticky přesune fokus. Poslední pole volá submitForm() pro odeslání formuláře.

Skrytí a zobrazení klávesnice

@FocusState poskytuje jednoduchý způsob skrytí klávesnice — stačí nastavit vlastnost na nil (pro enum) nebo false (pro Bool). Někdy je však třeba skrýt klávesnici bez vazby na konkrétní pole — například při klepnutí na prázdné místo. V tomto případě existuje několik přístupů.

struct DismissKeyboardView: View {
    @State var text = ""
    @FocusState var isFocused: Bool
    
    var body: some View {
        TextField("Enter text", text: $text)
            .focused($isFocused)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
                    Spacer()
                    Button("Klart") {
                        isFocused = false
                    }
                }
            }
    }
}

Modifikátor .toolbar s placement .keyboard přidává tlačítko nad klávesnici. Toto je standardní UX vzor v iOS pro skrytí klávesnice. Alternativní přístup — použití .onTapGesture na kořenovém VStack pro resetování fokusu při klepnutí na pozadí.

Fokus a validace formuláře

@FocusState se výborně kombinuje s validací formuláře. Typický vzor: po stisknutí tlačítka „Odeslat” zkontrolujte všechna pole a nastavte fokus na první pole s chybou. To zlepšuje uživatelský zážitek — uživatel okamžitě vidí, které pole je třeba opravit.

struct ValidatedForm: View {
    enum Field: Hashable { case name; case phone }
    
    @State var name = ""
    @State var phone = ""
    @FocusState var focusedField: Field?
    @State var errors: [String] = []
    
    var body: some View {
        Form {
            TextField("Name", text: $name)
                .focused($focusedField, equals: .name)
            TextField("Phone", text: $phone)
                .focused($focusedField, equals: .phone)
            
            Button("Skicka") { validateAndSubmit() }
        }
    }
    
    func validateAndSubmit() {
        if name.isEmpty {
            focusedField = .name
            return
        }
        if phone.isEmpty {
            focusedField = .phone
            return
        }
        // skicka formulär
    }
}

V tomto příkladu, když je pole name prázdné, fokus se na něj přesune a uživatel okamžitě vidí, kde je chyba. Pokud je name vyplněno, kontroluje se phone. Toto je přirozené chování pro formuláře — uživatel vyplňuje pole shora dolů a validace následuje stejné pořadí.

Typické chyby s @FocusState

Nejčastější chyba — pokus o použití @FocusState s typem, který není Hashable. @FocusState vyžaduje, aby typ vlastnosti byl Hashable (Bool a volitelné enumy již vyhovují). Pokud se pokoušíte použít vlastní strukturu, ujistěte se, že implementuje Hashable.

• Zapomněli jste modifikátor .focused() — @FocusState sám o sobě neřídí fokus. Musíte jej propojit s polem pomocí .focused($property) nebo .focused($property, equals: .case).
• Více @FocusState v jednom View — pro více polí použijte jeden @FocusState s enumem, ne několik @FocusState vlastností. Několik Bool vlastností nebude vzájemně synchronizováno.
• Změna @FocusState mimo hlavní vlákno — @FocusState musí být měněn pouze v hlavním vlákně, stejně jako všechny UI vlastnosti ve SwiftUI. Asynchronní operace by měly přepnout na MainActor před změnou.
• Resetování fokusu při přestavbě — pokud je View přestavěn, @FocusState se může resetovat. Použijte modifikátor .id() pro stabilní identifikaci View.

// ❌ Fel: två @FocusState Bool istället för enum
@FocusState var isNameFocused: Bool
@FocusState var isEmailFocused: Bool

// ✅ Korrekt: en enum @FocusState
enum Field: Hashable { case name; case email }
@FocusState var focusedField: Field?