【SwiftUI】Stackについてまとめてみた

SwiftUIでは、Stackはビューを水平（HStack）、垂直（VStack）、またはグリッド（ZStack）に配置および整理するための多目的なコンテナです。これはユーザーインターフェースを構築するための基本的なレイアウト構造です。

HStack（水平スタック）

HStackはビューを水平に配置するために使用されます。

HStack {
    Text("左")
    Spacer()
    Text("中央")
    Spacer()
    Text("右")
}

この例では、Spacer()ビューを挟んでTextビューが水平に配置されています。

VStack（垂直スタック）

VStackはビューを垂直に配置するために使用されます。

VStack {
    Text("上部")
    Spacer()
    Text("中央")
    Spacer()
    Text("下部")
}

この例では、Spacer()ビューを挟んでTextビューが垂直に配置されています。

ZStack（Z軸スタック）

ZStackはビューをオーバーレイし、z軸に沿ったビュースタックを作成するために使用されます。

ZStack {
    Circle()
        .fill(Color.blue)
        .frame(width: 100, height: 100)
    
    Text("中央")
        .foregroundColor(.white)
}

この例では、CircleがTextビューでオーバーレイされています。

アラインメントとスペーシング

HStackおよびVStackの両方で、アラインメントとスペーシングをカスタマイズできます。

VStack(alignment: .leading, spacing: 10) {
    Text("最初")
    Text("二番目")
    Text("三番目")
}

この例では、アラインメントが左揃えに設定され、ビュー間に10のスペーシングがあります。

ネストされたスタック

より複雑なレイアウトを作成するために、スタックをネストすることもできます。

VStack {
    HStack {
        Text("左上")
        Spacer()
        Text("右上")
    }
    
    Spacer()
    
    HStack {
        Text("左下")
        Spacer()
        Text("右下")
    }
}