縦・横・重ねて並べる ― VStack / HStack / ZStack

導入

画面には複数の部品が並びます。SwiftUIでは スタック という「入れ物」で部品を縦・横・奥行きに並べます。アプリのレイアウトの土台です。

説明

3種類のスタックがあります。

• VStack … 縦（Vertical）に並べる
• HStack … 横（Horizontal）に並べる
• ZStack … 前後に重ねる（Z軸）

struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            Text("タイトル")
                .font(.largeTitle)
                .fontWeight(.bold)
            HStack(spacing: 12) {
                Text("★")
                Text("★")
                Text("★")
            }
            Text("サブタイトル")
                .foregroundColor(.gray)
        }
        .padding()
    }
}

VStack(spacing: 16) の spacing は部品どうしのすき間。alignment で左寄せ（.leading）などもできます。スタックの中にスタックを入れて（ネスト）、複雑なレイアウトを組み立てます。ここでは縦並びの中に横並びを入れています。

やってみよう

VStack を HStack に変えて、並びが縦から横に変わるのを見てみましょう。spacing の数値を変えて、すき間の広さも調整してみてください。

演習

VStack の中に Text を3つ縦に並べ、それぞれ「朝」「昼」「夜」と表示してください。