SwiftUI Release 引入的辅助焦点管理

前言

SwiftUI Release 引入了强大的新功能，其中之一是辅助焦点管理。

这个新功能使得在SwiftUI中处理辅助技术（如 VoiceOver 和 Switch Control）的焦点状态变得更加轻松。本文将介绍如何使用 @FocusState 属性包装器来在SwiftUI中管理和移动辅助焦点。

使用 @FocusState 属性包装器

在 SwiftUI Release 中，我们获得了一整套特殊工具来更有效地处理辅助焦点。其中包括 @FocusState 属性包装器和 focused 视图修饰符。通过使用这些工具，我们能够以与无辅助技术相同的方式处理辅助焦点。

核心代码如下：

import SwiftUI

struct SignInView: View {
    @FocusState
    private var isEmailFocused: Bool

    @State private var email = ""

    var body: some View {
        NavigationView {
            Form {
                TextField("Email", text: $email, prompt: Text("Enter your email"))
                    .focused($isEmailFocused)
            }
            .navigationTitle("Sign In")
            .onChange(of: isEmailFocused) { newValue in
                print(newValue)
            }
        }
    }
}

如上例所示，我们使用 @FocusState 属性包装器定义一个变量，表示 email 字段是否聚焦。SwiftUI 默认使用 false 值初始化该变量，因为用户可以聚焦屏幕的任何其他区域。我们还使用 focused 视图修饰符将特定视图的焦点状态绑定到保存其值的变量。

请记住，您可以声明尽需要的变量，以使用 @FocusState 属性包装器涵盖辅助焦点逻辑。

高级技巧：专用辅助技术

核心代码如下：

import SwiftUI

struct SignInView: View {
    @FocusState
    private var isEmailFocused: Bool
    
    @FocusState
    private var isPasswordFocused: Bool

    @State private var email = ""
    @State private var password = ""

    var body: some View {
        NavigationView {
            Form {
                TextField("Email", text: $email, prompt: Text("Enter your email"))
                    .focused($isEmailFocused)
                SecureField("Password", text: $password, prompt: Text("Enter your password"))
                    .focused($isPasswordFocused)
            }
            .navigationTitle("Sign In")
        }
    }
}

@FocusState 属性包装器的好处之一是您可以将其行为限制为专用辅助技术。例如，您可以仅为VoiceOver或Switch Control激活 @FocusState 属性包装器。默认情况下，SwiftUI 会将设备上可用的所有辅助技术的值进行聚合。

可聚焦字段的高级用法

核心代码如下：

import SwiftUI

struct SignInView: View {
    @FocusState(for: .switchControl)
    private var isEmailFocused: Bool

    @State private var email = ""

    var body: some View {
        NavigationView {
            Form {
                TextField("Email", text: $email, prompt: Text("Enter your email"))
                    .focused($isEmailFocused)
            }
            .navigationTitle("Sign In")
            .onChange(of: isEmailFocused) { newValue in
                print(newValue)
            }
        }
    }
}

如上例所示，我们使用 @FocusState 属性包装器为 Switch Control 定义了可选变量 isEmailFocused，以便在用户在视图之间移动焦点时进行切换。

通常，屏幕上有多个元素，您可能希望在它们之间移动焦点。为了支持这种情况，SwiftUI 提供了一种通过枚举定义可聚焦字段并在它们之间切换的方法。这种方法是使用 @FocusState 属性包装器，并为其提供一个用于标识焦点类型的参数（在此例中是 .switchControl）。

优化体验

全部代码如下：

import SwiftUI

enum FocusableField: Hashable {
    case email
    case password
}

struct ContentView: View {
    @State private var email = ""
    @State private var password = ""
    
    @FocusState
    private var focus: FocusableField?

    var body: some View {
        NavigationView {
            Form {
                TextField("email", text: $email, prompt: Text("email"))
                    .focused($focus, equals: .email)
                SecureField("password", text: $password, prompt: Text("password"))
                    .focused($focus, equals: .password)
                Button("login", action: login)
            }
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    Button("next") {
                        if email.isEmpty {
                            focus = .email
                        } else if password.isEmpty {
                            focus = .password
                        } else {
                            focus = nil
                        }
                    }
                }
            }
            .navigationTitle("Sign in")
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
                    focus = .email
                }
            }
        }
    }

    private func login() {
        // your logic here
    }
}

运行截图

如上例所示，我们使用了 @FocusState 属性包装器与我们的新 FocusableField 枚举一起使用。该枚举定义了屏幕上所有可聚焦视图，应确保 FocusableField 枚举是可散列的。

使用 @FocusState 属性包装器定义了可选变量 focus，以便在用户将焦点从您定义的视图移动时将其值设置为 nil。

我们还使用了 focused 修饰符的一个版本，将一个视图绑定到可散列枚举的特定情况。请记住，您可以通过更改 @FocusState 包装的变量的值来以编程方式移动 VoiceOver 或 Switch Control 的焦点。

总结

在这篇文章中，我们深入探讨了 SwiftUI Release 引入的辅助焦点管理功能，使得处理辅助技术（如 VoiceOver 和 Switch Control）的焦点状态变得更加轻松。通过 @FocusState 属性包装器，我们学习了如何灵活地管理焦点状态，以提高用户体验。通过详细的示例代码，我们演示了如何在 SwiftUI 中使用 @FocusState，以及如何通过 focused 视图修饰符将焦点状态绑定到特定的视图。此外，我们介绍了一种高级用法，通过枚举定义可聚焦字段并在它们之间切换，以更好地支持屏幕上多个元素的焦点移动。最后，我们提供了一些优化 SwiftUI 应用的建议，以更好地整合焦点管理，并通过最佳实践和总结使读者更深入地了解了在 SwiftUI Release 中使用 @FocusState 管理焦点的方法。