SwiftUI中使用Switch Control时如何分组字段并调整字段顺序

对应UIKit里的accessibilityNavigationStyle和accessibilityElements功能，SwiftUI可以通过以下几种方式实现Switch Control下的字段分组与点击顺序控制：

1. 使用accessibilityElement(children:)实现元素分组 #

这个修饰符对应UIKit的容器级分组逻辑，通过指定参数管理子元素的可访问性：

• .contain：将子元素整合为一个可访问组，用户选中组后可遍历组内元素
• .ignore：忽略子元素的可访问性，仅当前元素本身可被访问

示例代码：

VStack {
    Text("用户信息")
        .font(.headline)
    TextField("姓名", text: $name)
    TextField("邮箱", text: $email)
}
.accessibilityElement(children: .contain)
.accessibilityLabel("用户信息组")

2. 用accessibilityOrder()自定义导航顺序 #

通过accessibilityOrder()可以直接指定Switch Control的遍历顺序，替代UIKit中手动设置accessibilityElements数组的方式：

示例代码：

struct ContentView: View {
    @State private var name = ""
    @State private var email = ""
    @State private var phone = ""

    var body: some View {
        VStack {
            TextField("邮箱", text: $email)
                .accessibilityOrder(2)
            TextField("姓名", text: $name)
                .accessibilityOrder(1)
            TextField("电话", text: $phone)
                .accessibilityOrder(3)
        }
    }
}

此时Switch Control会按照1→2→3的顺序遍历输入框，不受视图布局顺序影响。

3. 分组与自定义顺序结合使用 #

如果需要同时实现分组和组内顺序控制，可以嵌套使用两种修饰符：

VStack {
    VStack {
        TextField("姓名", text: $name)
            .accessibilityOrder(1)
        TextField("邮箱", text: $email)
            .accessibilityOrder(2)
    }
    .accessibilityElement(children: .contain)
    .accessibilityLabel("用户信息组")
    .accessibilityOrder(1)

    VStack {
        TextField("地址", text: $address)
            .accessibilityOrder(1)
        TextField("邮编", text: $zip)
            .accessibilityOrder(2)
    }
    .accessibilityElement(children: .contain)
    .accessibilityLabel("地址信息组")
    .accessibilityOrder(2)
}

Switch Control会先访问「用户信息组」，进入组内按指定顺序遍历元素，再访问「地址信息组」并遍历其内部元素。

补充说明 #

• 若布局顺序和导航顺序一致，可直接调整视图布局；accessibilityOrder()更适合布局与导航需求不一致的场景
• 测试时需打开Switch Control（设置→辅助功能→Switch Control）验证效果

内容的提问来源于stack exchange，提问作者RichardC