【SfiftUI】スタックレイアウトの使い方

スタックの説明と種類

スタックは各ビューを内包するようにすることでビュー同士を並べることが可能
スタックにはVStack,HStack,ZStackがある。
VStackは縦方向(Vertical)、HStackは横方向(Horizon)、ZStackは前後の方向を指定することができる

ビューを縦に並べる

VStack {
    Text("前後に並べる")
    Text("テキスト")
}

横並びのビューを配置する

VStack {
    Text("前後に並べる")
    Text("テキスト")
    HStack {
        Text("左右に並べる")
        Text("テキスト")
    }
}

Specer

ビューに合わせて伸縮してくれる余白を挿入することが可能

HStack {
    Spacer()
    Text("左右に並べる")
    Spacer()
    Text("テキスト")
    Spacer()
}

Divider

仕切り線を挿入

VStack {
    Spacer()
    Text("左右に並べる")
    Divider()
    Text("テキスト")
    Spacer()
}

ZStackでビューを重ねる

主に画像にキャプションを重ねる際などに便利

ZStack {
    Image("sample")
    Text("左右に並べる")
}