在 SwiftUI 中 accessibilityChildren 视图修饰符的作用

前语

SwiftUI 为咱们供给了一系列丰厚的视图修饰符，用于操作视图的可拜访性树。我已经介绍了其中许多，你能够在博客中找到它们。本文咱们将评论 accessibilityChildren 视图修饰符以及咱们怎么从中获益。

accessibilityChildren 视图修饰符答应咱们为视图创立一个可拜访性容器，并运用 ViewBuilder 闭包供给的视图元素进行填充。

示例

让咱们来看一个简单的示例。

struct BarChartShape: Shape {
    let dataPoints: [DataPoint]
    func path(in rect: CGRect) -> Path {
        Path { p in
            let spacing: CGFloat = 10  // 距离为 10 像素
            let totalSpacing = CGFloat(dataPoints.count - 1) * spacing
            let availableWidth = rect.size.width - totalSpacing
            let width: CGFloat = availableWidth / CGFloat(dataPoints.count)
            var x: CGFloat = 0
            for point in dataPoints {
                let pointRect = CGRect(
                    x: x,
                    y: rect.size.height - point.value,
                    width: width,
                    height: point.value
                )
                let pointPath = RoundedRectangle(cornerRadius: 8).path(in: pointRect)
                p.addPath(pointPath)
                x += width + spacing  // 增加距离
            }
        }
    }
}

如你在上面的示例中所见，咱们有一个绘制数据点的形状类型。咱们无法为每个数据点供给可拜访性值，由于在描边或填充形状后，该形状将成为一个单一视图。

accessibilityChildren 运用

不过，SwiftUI 为这种情况专门供给了 accessibilityChildren 视图修饰符。

struct ContentView: View {
    @State private var dataPoints: [DataPoint] = [
        .init(value: 200),
        .init(value: 300),
        .init(value: 50),
        .init(value: 600),
        .init(value: 500)
    ]
    var body: some View {
        BarChartShape(dataPoints: dataPoints)
            .fill(.red)
            .accessibilityLabel("Chart")
            .accessibilityChildren {
                HStack(alignment: .bottom, spacing: 0) {
                    ForEach(dataPoints) { point in
                        RoundedRectangle(cornerRadius: 8)
                            .accessibilityValue(Text(point.value.formatted()))
                    }
                }
            }
    }
}

经过应用 accessibilityChildren 视图修饰符，咱们创立了一个可拜访性容器，并运用 ViewBuilder 闭包中供给的视图元素进行填充。SwiftUI 不会烘托咱们经过 ViewBuilder 闭包传递的视图，它仅用于填充可拜访性树的子元素。

accessibilityChildren 和 accessibilityRepresentation 视图修饰符之间的首要差异在于前者不会影响视图本身。它仅为子元素创立一个可拜访性容器，而 accessibilityRepresentation 视图修饰符会彻底替换当前视图的可拜访性树。

完整代码

首先，你需求定义 DataPoint 结构体，然后能够在 ContentView 中初始化 dataPoints 数组。以下是完善后的代码：

import SwiftUI
struct DataPoint: Identifiable {
    var id = UUID()
    var value: CGFloat
}
struct BarChartShape: Shape {
    let dataPoints: [DataPoint]
    func path(in rect: CGRect) -> Path {
        Path { p in
            let width: CGFloat = rect.size.width / CGFloat(dataPoints.count)
            var x: CGFloat = 0
            for point in dataPoints {
                let pointRect = CGRect(
                    x: x,
                    y: rect.size.height - point.value,
                    width: width,
                    height: point.value
                )
                let pointPath = RoundedRectangle(cornerRadius: 8).path(in: pointRect)
                p.addPath(pointPath)
                x += width
            }
        }
    }
}
struct ContentView: View {
    @State private var dataPoints: [DataPoint] = [
        .init(value: 20),
        .init(value: 30),
        .init(value: 5),
        .init(value: 100),
        .init(value: 80)
    ]
    var body: some View {
        BarChartShape(dataPoints: dataPoints)
            .fill(Color.red)
            .accessibilityLabel("Chart")
            .accessibilityChildren {
                HStack(alignment: .bottom, spacing: 0) {
                    ForEach(dataPoints) { point in
                        RoundedRectangle(cornerRadius: 8)
                            .fill(Color.blue)  // You can change the color here
                            .frame(width: 20, height: point.value)
                            .accessibilityValue(Text(String(Int(point.value)))
                        }
                    }
                }
            }
        }
    }

上述代码已增加了所需的 DataPoint 结构体和 ContentView，并经过 BarChartShape 创立了柱状图。此代码将以红色柱状图的方式显现数据点，每个数据点的值决议柱状的高度，同时也包括辅助功能信息以供给无障碍体会。

请注意，柱状图的颜色能够经过 .fill(Color.red) 进行自定义。在上述代码中，将柱状图填充颜色设为红色。您能够根据需求自行更改填充颜色。

运行截图：

总结

今天，咱们了解了 SwiftUI 为咱们供给的又一个强壮的可拜访性视图修饰符。SwiftUI 凭借供给如此多友好的 API，简化了咱们为了使咱们的应用对每个人都具有可拜访性而必须做的作业，做得十分超卓。