SwiftUI ZStack

覆盖其子视图的视图，使它们在两个轴上对齐
iOS 13.0+iPadOS 13.0+macOS 10.15+Mac Catalyst 13.0+tvOS 13.0+watchOS 6.0+

ZStack 为每个连续的子视图分配一个比前一个更高的 z 轴值，这意味着后面的子视图出现在前面的子视图“顶部”。

下面的示例创建一个 100 x 100 点的 ZStack 矩形视图，填充六种颜色中的一种，将每个连续的子视图偏移 10 个点，这样它们就不会完全重叠：

let colors: [Color] =
    [.red, .orange, .yellow, .green, .blue, .purple]

var body: some View {
    ZStack {
        ForEach(0..<colors.count) {
            Rectangle()
                .fill(colors[$0])
                .frame(width: 100, height: 100)
                .offset(x: CGFloat($0) * 10.0,
                        y: CGFloat($0) * 10.0)
        }
    }
}
SwiftUI ZStack offset rectangles

ZStack 使用 Alignment 设置每个子视图的 x 轴和 y 轴坐标，默认为中心对齐。 在下面的示例中，ZStack 使用 bottomLeading 对齐来布置两个子视图，下方是红色 100 x 50 点矩形，顶部是蓝色 50 x 100 点矩形。 由于对齐值，两个矩形都与 ZStack 共享一个左下角（在左侧是前导边的语言环境中）。

var body: some View {
    ZStack(alignment: .bottomLeading) {
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 50)
        Rectangle()
            .fill(Color.blue)
            .frame(width:50, height: 100)
    }
    .border(Color.green, width: 1)
}
SwiftUI ZStack alignment