構造体

ZStack

子を重ね合わせ、両方の軸にそれらを揃えるビュー。

宣言

@frozen struct ZStack<Content> where Content : View

概観

ZStack は、連続する各子ビューに、前の子ビューよりも高い z 軸値を割り当てます。つまり、後の子は前の子の "上" に表示されます。

以下の例では、6 色のいずれかで塗りつぶされた 100 x 100 ポイントの Rectangle ビューの 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 軸の座標を設定し、デフォルトで center の配置に設定します。以下の例では、ZStack は bottomLeading の配置を使用して、2 つの子、つまり下に赤の 100 x 50 ポイントの長方形、および上に青い 50 x100 ポイントの長方形をレイアウトします。配置する値のため、両方の長方形は 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)

}