如何在 SwiftUI 中使用 AccessibilityCustomContentKey 修饰符

前言

SwiftUI 3 发布了许多新的辅佐功用 API，咱们能够运用这些 API 以轻松的方法明显提高用户体验。本篇文章来聊聊另一个新的 API，咱们能够运用 SwiftUI 中的新 accessibilityCustomContent 视图修饰符供给自界说的辅佐功用内容。

创立 User 结构体

让咱们从一个简单的示例开始，界说 User 结构体以及出现 User 结构体实例的视图。

import SwiftUI
struct User: Decodable {
    let name: String
    let email: String
    let address: String
    let age: Int
}
struct UserView: View {
    let user: User
    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.headline)
            Text(user.address)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text(user.email)
                .foregroundColor(.secondary)
            Text("Age: (user.age)")
                .foregroundColor(.secondary)
        }
    }
}

增加辅佐修饰符

SwiftUI 在开箱即用时为咱们供给了超卓的辅佐功用支撑。不需要执行任何操作即可使你的 UserView 可拜访。UserView 内的每个文本片段都对辅佐技术（如VoiceOver和Switch Control）可拜访。这听起来很好，但它可能会经过很多数据压倒VoiceOver用户。让咱们经过向 UserView 增加一些辅佐功用修饰符来稍微改进辅佐功用支撑。

struct UserView: View {
    let user: User
    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.headline)
            Text(user.address)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text(user.email)
                .foregroundColor(.secondary)
            Text("Age: (user.age)")
                .foregroundColor(.secondary)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(user.name)
    }
}

如上例所示，咱们运用辅佐功用修饰符来忽略子元素的辅佐功用内容，使堆栈本身成为辅佐功用元素。咱们还向堆栈增加了辅佐功用标签，但仍然错过了其他部分。咱们期望使一切数据都可拜访。一般，咱们运用不同的字体和色彩在视觉上为文本设置优先级，可是怎么在辅佐技术中实现相同的影响呢？

运用新的修饰符

SwiftUI 经过全新的 accessibilityCustomContent视图修饰符供给了一种运用不同重要性生成自界说辅佐功用内容的方法。让咱们看看怎么运用它。

struct UserView: View {
    let user: User
    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.headline)
            Text(user.address)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text(user.email)
                .foregroundColor(.secondary)
            Text("Age: (user.age)")
                .foregroundColor(.secondary)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(user.name)
        .accessibilityCustomContent("Age", "(user.age)")
        .accessibilityCustomContent("Email", user.email, importance: .high)
        .accessibilityCustomContent("Address", user.address, importance: .default)
    }
}

在这里，咱们增加了一堆 accessibilityCustomContent 视图修饰符，以不同的优先级界说自界说辅佐功用内容。accessibilityCustomContent 视图修饰符有三个参数：

1. 用于你的自界说内容的本地化标签，VoiceOver 用于宣布。
2. 用于出现自界说内容的本地化标签或字符串值。
3. 你的自界说内容的重要性等级。它能够是默许或高。VoiceOver 会当即读取具有高重要性的内容，而具有默许重要性的内容仅在用户运用垂直滑动拜访更多数据时以冗长模式朗读。

accessibilityCustomContent 视图修饰符答应咱们为辅佐技术优先考虑数据。例如，VoiceOver会当即读取具有高重要性的数据，并答应用户运用垂直滑动根据需要拜访具有默许重要性的数据。

运用修饰符来替换和掩盖数据

你能够运用尽可能多的 accessibilityCustomContent视图修饰符来出现很多的数据子集。还能够经过运用相同的标签引进具有相同标签的 accessibilityCustomContent 视图修饰符来替换和掩盖数据或重要性。

在整个大型代码库中保持自界说辅佐功用内容标签的一种绝佳方法是运用 AccessibilityCustomContentKey 类型。你能够将其实例用作 accessibilityCustomContent 视图修饰符的第一个参数。

extension AccessibilityCustomContentKey {
    static let age = AccessibilityCustomContentKey("Age")
    static let email = AccessibilityCustomContentKey("Email")
    static let address = AccessibilityCustomContentKey("Address")
}
struct UserView: View {
    let user: User
    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.headline)
            Text(user.address)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text(user.email)
                .foregroundColor(.secondary)
            Text("Age: (user.age)")
                .foregroundColor(.secondary)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(user.name)
        .accessibilityCustomContent(.age, "(user.age)")
        .accessibilityCustomContent(.email, user.email, importance: .high)
        .accessibilityCustomContent(.address, user.address, importance: .default)
    }
}

在上面的示例中，咱们为自界说的辅佐功用内容键界说了一些快捷方法，并与 accessibilityCustomContent 视图修饰符结合运用。

可运转代码

在这个示例中，咱们创立了一个 ContentView，在其间创立了一个 User 实例，并将其传递给 UserView。这个示例运用了文章中第三个代码段，其间包含了一些辅佐功用的设置。

import SwiftUI
struct User: Decodable {
    let name: String
    let email: String
    let address: String
    let age: Int
}
struct UserView: View {
    let user: User
    var body: some View {
        VStack(alignment: .leading) {
            Text(user.name)
                .font(.headline)
            Text(user.address)
                .font(.subheadline)
                .foregroundColor(.secondary)
            Text(user.email)
                .foregroundColor(.secondary)
            Text("Age: (user.age)")
                .foregroundColor(.secondary)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(user.name)
        .accessibilityCustomContent("Age", "(user.age)")
        .accessibilityCustomContent("Email", user.email, importance: .high)
        .accessibilityCustomContent("Address", user.address, importance: .default)
    }
}
struct ContentView: View {
    var body: some View {
        let exampleUser = User(name: "Swift Com", email: "swift.com@example.com", address: "123 Main St", age: 25)
        UserView(user: exampleUser)
            .padding()
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

运转截图：

总结

今日，咱们学习了怎么运用accessibilityCustomContent视图修饰符，经过为辅佐技术优先处理咱们的数据，以及根据需要答应用户拜访更多详细信息，从而使咱们的应用程序更具可拜访性。