@FocusState — was ist das, Verwaltung von Fokus und Tastatur in SwiftUI

Was ist @FocusState in SwiftUI

@FocusState ist ein property wrapper, der den Fokusstatus an ein bestimmtes Eingabefeld oder ein anderes fokussierbares Element in SwiftUI bindet. Im Gegensatz zu UIKit, wo die Fokusverwaltung über die Methoden becomeFirstResponder und resignFirstResponder erfolgt, verwendet SwiftUI einen deklarativen Ansatz: Sie deklarieren einen Status (@FocusState) und binden ihn über den .focused()-Modifikator an ein Element. Eine Änderung des Status ändert automatisch den Fokus.

Vor der Einführung von @FocusState in iOS 15 mussten Entwickler UIViewRepresentable-Wrapper um UITextField erstellen oder Bibliotheken von Drittanbietern verwenden. @FocusState ist direkt in SwiftUI integriert und funktioniert mit TextField, TextEditor, SecureField und SearchField. Dies macht den Code sauberer, reduziert die Anzahl der UIKit-Brücken und verbessert die Testbarkeit.

Laut WWDC Session 10136 — What's new in SwiftUI (2024) verwendet @FocusState das Preference-Key-System von SwiftUI, um Fokusinformationen zwischen Elementen zu übergeben. Wenn ein Feld den Fokus erhält, aktualisiert SwiftUI automatisch die zugehörige @FocusState-Eigenschaft, sodass Sie auf Fokusänderungen im Code reagieren können.

Fokusverwaltung mit Bool

Der einfachste Weg, @FocusState zu verwenden, ist mit dem Typ Bool. Wenn ein Feld fokussiert ist, ist die Eigenschaft true. Wenn der Fokus verloren geht — false. Sie können den Fokus erzwingen, indem Sie ihn auf true setzen, oder ihn entfernen, indem Sie ihn auf false setzen.

struct LoginForm: View {
    @State var email = ""
    @FocusState var isEmailFocused: Bool
    
    var body: some View {
        VStack {
            TextField("Email", text: $email)
                .focused($isEmailFocused)
            
            Button("Tastatur anzeigen") {
                isEmailFocused = true
            }
            Button("Tastatur ausblenden") {
                isEmailFocused = false
            }
        }
    }
}

In diesem Beispiel wird isEmailFocused automatisch true, wenn der Benutzer auf das Textfeld tippt, und false, wenn die Tastatur ausgeblendet wird. Die Schaltflächen ermöglichen die programmgesteuerte Fokusverwaltung — nützlich für benutzerdefinierte Tastaturen, "Weiter"-Schaltflächen und Situationen, in denen Sie die Tastatur nach dem Absenden des Formulars zwangsweise ausblenden müssen.

Fokusverwaltung mit Enum für mehrere Felder

Für Formulare mit mehreren Feldern unterstützt @FocusState ein enum, das dem FocusStateValue (oder Hashable)-Protokoll entspricht. Jeder enum-Fall entspricht einem bestimmten Feld. Dies ermöglicht das Umschalten des Fokus zwischen Feldern — zum Beispiel, wenn der Benutzer auf der Tastatur "Weiter" drückt, um zum nächsten Feld zu gelangen.

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() }
        }
    }
}

Beachten Sie den .onSubmit-Modifikator — er wird aufgerufen, wenn der Benutzer auf der Tastatur "Return" drückt. Innerhalb von .onSubmit schalten wir focusedField auf das nächste Feld um, was den Fokus automatisch verschiebt. Das letzte Feld ruft submitForm() zum Absenden des Formulars auf.

Tastatur ein- und ausblenden

@FocusState bietet eine einfache Möglichkeit, die Tastatur auszublenden — setzen Sie einfach die Eigenschaft auf nil (für enum) oder false (für Bool). Manchmal müssen Sie die Tastatur jedoch ausblenden, ohne sie an ein bestimmtes Feld zu binden — zum Beispiel beim Tippen auf eine leere Stelle. In diesem Fall gibt es mehrere Ansätze.

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("Fertig") {
                        isFocused = false
                    }
                }
            }
    }
}

Der .toolbar-Modifikator mit placement .keyboard fügt eine Schaltfläche über der Tastatur hinzu. Dies ist ein standardmäßiges UX-Muster in iOS zum Ausblenden der Tastatur. Ein alternativer Ansatz ist die Verwendung von .onTapGesture auf dem root-VStack, um den Fokus beim Tippen auf den Hintergrund zurückzusetzen.

Fokus und Formularvalidierung

@FocusState lässt sich hervorragend mit der Formularvalidierung kombinieren. Ein typisches Muster: Nach dem Drücken der "Senden"-Schaltfläche alle Felder validieren und den Fokus auf das erste Feld mit einem Fehler setzen. Dies verbessert die Benutzererfahrung — der Benutzer sieht sofort, welches Feld korrigiert werden muss.

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("Absenden") { validateAndSubmit() }
        }
    }
    
    func validateAndSubmit() {
        if name.isEmpty {
            focusedField = .name
            return
        }
        if phone.isEmpty {
            focusedField = .phone
            return
        }
        // Formular absenden
    }
}

In diesem Beispiel wird, wenn das name-Feld leer ist, der Fokus darauf verschoben, und der Benutzer sieht sofort, wo der Fehler ist. Wenn name ausgefüllt ist, wird phone überprüft. Dies ist ein natürliches Verhalten für Formulare — der Benutzer füllt die Felder von oben nach unten aus, und die Validierung folgt derselben Reihenfolge.

Häufige Fehler mit @FocusState

Der häufigste Fehler ist der Versuch, @FocusState mit einem Typ zu verwenden, der nicht Hashable entspricht. @FocusState erfordert, dass der Eigenschaftstyp Hashable ist (Bool und optionale enums entsprechen bereits). Wenn Sie versuchen, eine benutzerdefinierte Struktur zu verwenden, stellen Sie sicher, dass sie Hashable implementiert.

• .focused()-Modifikator vergessen — @FocusState allein verwaltet den Fokus nicht. Sie müssen es über .focused($property) oder .focused($property, equals: .case) an ein Feld binden.
• Mehrere @FocusState in einer View — für mehrere Felder verwenden Sie ein einzelnes @FocusState mit einem enum, nicht mehrere @FocusState-Eigenschaften. Mehrere Bool-Eigenschaften werden nicht miteinander synchronisiert.
• Änderung von @FocusState außerhalb des Hauptthreads — @FocusState sollte nur im Hauptthread geändert werden, wie alle UI-Eigenschaften in SwiftUI. Asynchrone Operationen müssen vor der Änderung zu MainActor wechseln.
• Fokus zurücksetzen beim Neuaufbau der View — wenn die View neu aufgebaut wird, kann @FocusState zurückgesetzt werden. Verwenden Sie den .id()-Modifikator für eine stabile Identifizierung der View.

// ❌ Falsch: zwei @FocusState Bool statt enum
@FocusState var isNameFocused: Bool
@FocusState var isEmailFocused: Bool

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