Text を Stack 要素に入れる#

以下の四つは全く同じ見た目になります。つまり、Stack 内に入れるデータが一つしかない場合は見た目の変化が起こりません。

ちなみに見た目としては画面中央揃えでテキストが表示されます。

var body: some View {
    Text("Hello, world!")
}

var body: some View {
    HStack {
        Text("Hello, world!")
    }
}

var body: some View {
    VStack {
        Text("Hello, world!")
    }
}

var body: some View {
    ZStack {
        Text("Hello, world!")
    }
}

Text 二つを Stack に入れる#

テキストを二つ入れると、それぞれの Stack の特徴はでるようになりますが、やはり全体としては中央揃えになります。

なんでなんだろうなあと考えてみたのですが、HStack や VStack などはbodyに対して何の Alignment もかかっていないので変化しないのだと思います。

つまり、SwiftUI においては何もしなければ「中央揃え」が適用されるということになります。

Stack に Alignment をつける#

オプションで各 Stack にはContainer Alignmentをつけることができます。

ただし、HStack にはleadingはつけられませんし、VStack にtopを指定することはできません。これってちょっと不便な気がするのですが、どうなんでしょう？

VStack のイメージはこんな感じで、何もしなければコンテナ自体の大きさは可変で中に入れる要素ピッタリの大きさまで広がります。

コンテナ自体の大きさが可変であるため「コンテナ内の上から順番に積み上げていく」という意味であるtopを指定することができないというわけです。

しかし、SwiftUI にはFrame Alignmentというものがあるので、例えばframe(height: 200)などを指定してコンテナのサイズを固定させて上から積み上げていくというのは需要がありそうな気もします。

::: warning middle じゃないじゃん

何も考えずに垂直方向の中央揃えを middle って書いてましたが、実際には center になります。

:::

Stack に Frame Alignment をつける#

というわけで VStack に対してFrame Alignmentを適用してみます。

var body: some View {
    VStack(alignment: .center) {
        Text("Hello, world!")
        Text("by tkgstrator.work")
    }
    .frame(alignment: .leading)
}

ただし、このコードだと.frame(alignment: .leading)は何の効果も持たず、centerを指定した場合と全く同じ見た目になります。

ただし、以下のようにFrame Alignmentに対してwidth要素を付けると見た目が変わります。

var body: some View {
    VStack(alignment: .center) {
        Text("Hello, world!")
        Text("by tkgstrator.work")
    }
    .frame(width: 300, alignment: .leading)
}

何故なら VStack の幅は可変で常に内部のオブジェクトぴったりになるように大きさが変わっているからです。つまり、VStack（または HStack に対して）Frame Alignmentだけを指定するのは全く意味がありません。ダグドリオに十万ボルトするくらい意味がないです。

::: tip Frame Alignment について

幅を指定しないときは VStack と Frame の幅は完全に一致しています。

なので、Frame 内で VStack を左寄せすることはできません。Frame 要素の幅を指定することで VStack を Frame 内で幅寄せすることができるようになるわけです。

:::

点線の部分は実際には見えないので、オブジェクトだけが左に寄ったように見えるわけです。

// 確認用コード
var body: some View {
    VStack(alignment: .center) {
        Text("Hello, world!")
        Text("by tkgstrator.work")
    }
    .background(Color.gray.opacity(0.3))
    .frame(width: 200, alignment: .leading)
    .background(Color.red.opacity(0.3))
}

実際に表示してみるとこのようになります。赤い背景が Frame でが設定された上で全体の中央になっており（デフォルト）、灰色の背景の VStack が Frame 内で左寄せになり、その中のテキストが中央揃えになっていることがわかります。