[SwiftUI] HStack

参照：
HStack | Apple Developer Documentation
Building layouts with stack views | Apple Developer Documentation

概要：

• 自身のサブビューを水平線上に配置する。
• LazyHStackと異なり、画面に表示される如何に関わらず全ての領域を描画する。
• デフォルトで使用した場合はサブビューの間に僅かな隙間のみを挿入する。
• alignmentプロパティはサブビューの垂直線上のポジションを指定する。
• Spacerは隣り合うビューかstackの端の間で可能な限り広がり、空白を埋める。

サンプル：

① 要素数1

    HStack {
        Text("Text A")
            .background(Color.blue)
    }
    .background(Color.green)

②要素数2

    HStack {
        Text("Text A")
            .background(Color.blue)
        Text("Text B")
            .background(Color.red)
    }
    .background(Color.green)

③要素数3

    HStack {
        Text("Text A")
            .background(Color.blue)
        Text("Text B")
            .background(Color.red)
        Text("Text C")
            .background(Color.yellow)
    }
    .background(Color.green)

④alignmentを指定

サブビュー群とHStackの間で垂直方向の空白が無いため、
表示は変わりません。

    HStack (alignment: .bottom){
        Text("Text A")
            .background(Color.blue)
        Text("Text B")
            .background(Color.red)
    }
    .background(Color.green)

⑤垂直方向に余白ありでalignmentを指定

TextAのサイズを縦に広げ、
alignment指定によりTextBが下に移動しました。

    HStack (alignment: .bottom){
        Text("Text A")
            .frame(height: 300)
            .background(Color.blue)
        Text("Text B")
            .background(Color.red)
    }
    .background(Color.green)

.frameと.backgroundの順番を逆に指定すると,
下のような結果になりました。

⑥Spacerをサブビュー間に配置

    HStack (alignment: .bottom){
        Text("Text A")
            .background(Color.blue)
        Spacer()
        Text("Text B"
            .background(Color.red)
    }
    .background(Color.green)

⑦Spacerをサブビューの両サイドに配置

        HStack (alignment: .bottom){
            Spacer()
            Text("Text A")
                .background(Color.blue)
            Spacer()
            Text("Text B")
                .background(Color.red)
            Spacer()
        }
        .background(Color.green)

⑧Spacerをサブビューの両サイドに配置（親ビューあり）

黄色の正方形がHStackの親ビューです。

        VStack {
            HStack (alignment: .bottom){
                Spacer()
                Text("Text A")
                    .background(Color.blue)
                Spacer()
                Text("Text B")
                    .background(Color.red)
                Spacer()
            }
            .background(Color.green)
        }
        .frame(width: 200, height:200)
        .background(Color.yellow)

所感

• .alignmentは自スタック内でのサブビューの位置を決めるので自スタックの領域を意識した方が良い。
• Spacerは最大で親ビューの大きさまで広がるので、親スペースの領域を意識した方が良い。