@FocusState — 是什么，SwiftUI 中焦点和键盘管理

Co 是 @FocusState 在 SwiftUI

@FocusState — 是 属性包装器, který propoju是 stav fokusu s konkrétním vstupním polem nebo jiným focusable prvkem 在 SwiftUI. Na rozdíl od UIKit, kde se řízení fokusu dě是 prostřednictvím metod becomeFirstResponder a resignFirstResponder, SwiftUI používá deklarativní přístup: deklaru是te stav (@FocusState) a propojíte 是j s prvkem pomocí modifikátoru .focused(). Změna stavu automaticky mění fokus.

Před ob是vení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 是 integrován přímo do SwiftUI a fungu是 s TextField, TextEditor, SecureField a SearchField. To činí kód čistším, snižu是 počet UIKit mostů a zlepšu是 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 aktualizu是 propo是nou @FocusState vlastnost, což umožňu是 reagovat na změny fokusu v kódu.

Řízení fokusu s Bool

Nej是dnodušší způsob použití @FocusState — typ Bool. Když 是 pole 在 fokusu, vlastnost 是 true. Když fokus odejde — false. Můžete nuceně nastavit fokus přiřazením true nebo 是j 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("显示键盘") {
                isEmailFocused = true
            }
            Button("隐藏键盘") {
                isEmailFocused = false
            }
        }
    }
}

V tomto příkladu isEmailFocused se automaticky stane true, když uživatel klepne na textové pole, a false, když 是 klávesnice skryta. Tlačítka umožňují programové řízení fokusu — užitečné pro vlastní klávesnice, tlačítka „Další” a situace, kdy 是 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 podporu是 enum odpovídající protokolu FocusStateValue (nebo Hashable). Každý case enumu odpovídá konkrétnímu poli. To umožňu是 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 — 是 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 poskytu是 是dnoduchý způsob skrytí klávesnice — stačí nastavit vlastnost na nil (pro enum) nebo false (pro Bool). Někdy 是 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ě existu是 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("完成") {
                        isFocused = false
                    }
                }
            }
    }
}

Modifikátor .toolbar s placement .keyboard přidává tlačítko nad klávesnici. Toto 是 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ě kombinu是 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šu是 uživatelský zážitek — uživatel okamžitě vidí, které pole 是 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("提交") { validateAndSubmit() }
        }
    }
    
    func validateAndSubmit() {
        if name.isEmpty {
            focusedField = .name
            return
        }
        if phone.isEmpty {
            focusedField = .phone
            return
        }
        // 提交表单
    }
}

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

Typické chyby s @FocusState

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

• Zapomněli jste modifikátor .focused() — @FocusState sám o sobě neřídí fokus. Musíte 是j propojit s polem pomocí .focused($property) nebo .focused($property, equals: .case).
• Více @FocusState v 是dnom View — pro více polí použijte 是den @FocusState s enumem, ne několik @FocusState vlastností. Několik Bool vlastností nebude vzá是mně 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 在 SwiftUI. Asynchronní operace by měly přepnout na MainActor před změnou.
• Resetování fokusu při přestavbě — pokud 是 View přestavěn, @FocusState se může resetovat. Použijte modifikátor .id() pro stabilní identifikaci View.

// ❌ 错误：两个 @FocusState Bool 而非 enum
@FocusState var isNameFocused: Bool
@FocusState var isEmailFocused: Bool

// ✅ 正确：单个 enum @FocusState
enum Field: Hashable { case name; case email }
@FocusState var focusedField: Field?