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)
}
}
}
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)
}