[SwiftUI] Stackの使い方

SwiftUIにはレイアウトを組み立てるためにStackという構造体を使用できます😌

ContentViewのbodyプロパティでは、必ず1つだけビューを返すようにしなければいけません。
そのため、TextビューやImageビューを複数使用する場合は、1つのビューにまとめる必要があります。

その際に使用できるのが Stack です🎉

Stackの種類

Stackには VStack、HStack、ZStack の3つの種類があります。

VStack
垂直方向に配置できるスタック

HStack
水平方向に配置できるスタック

ZStack
Z軸にビューを重ねて配置できるスタック

この3つです

Stackの使い方

３つそれぞれのイニシャライザから、使い方をみていきましょう！

VStack

VStack(alignment: HorizontalAlignment, spacing: CGFloat?, content: () -> _ )

alignment
水平方向の配置方法をHorizontalAlignmentプロパティを使って指定します。
指定できるのは以下の3つで、デフォルトはcenterです。

・leading・・・左寄せ
・center・・・中央寄せ
・trailing・・・右寄せ

spacing
VStackに入れた子ビュー同士の間隔を指定します。
デフォルトはnilで、システムのデフォルトの幅が適用されます。

content
VStackに配置する子ビューを指定します（10個まで）。

VStack(alignment: .leading, spacing: 30) {
   Text("Text View 1")
   Text("テキストビュー２")
   Text("てきすとびゅう〜３")
}

HStack

HStack(alignment: VerticalAlignment, spacing: CGFloat?, content: () -> _ )

alignment
垂直方向の配置方法をVerticalAlignmentプロパティを使って指定します。
指定できるのは以下の5つで、デフォルトはcenterです。

・top・・・上寄せ
・center・・・中央寄せ
・bottom・・・下寄せ
・firstTextBaseline・・・最初の文字のベースラインに合わせる
・lastTextBaseline・・・最後の文字のベースラインに合わせる

spacing
HStackに入れた子ビュー同士の間隔を指定します。
デフォルトはnilで、システムのデフォルトの幅が適用されます。

content
HStackに配置する子ビューを指定します（10個まで）。

HStack(alignment: .firstTextBaseline, spacing: 20) {
   Text("View 1")
   Text("ビュー２").font(.largeTitle)
   Text("びゅう〜３").font(.caption)
}

ZStack

ZStack(alignment: Alignment, content: () -> _)

alignment
重なるビューの配置方法をAlignmentプロパティを使って指定します。
指定できるのは以下の9つで、デフォルトはcenterです。

・center・・・中央寄せ
・top・・・上寄せ
・bottom・・・下寄せ
・leading・・・左寄せ
・trailing・・・右寄せ
・topLeading・・・左上寄せ
・topTrailing・・・右上寄せ
・bottomLeading・・・左下寄せ
・bottomTrailing・・・右下寄せ

content
ZStackに配置する子ビューを指定します（10個まで）。

ZStack(alignment: .top) {
   Image("swift")
   Text("すうぃふと！！").font(.largeTitle)
}

VStack、HStack、ZStackすべてを入れ子にしてこんな風にレイアウトを組むこともできます！

var body: some View {
   VStack(alignment: .leading) {
       VStack(alignment: .leading, spacing: 30) {
           Text("1.はじめに")
           Text("2.Stackの種類")
           
           HStack(alignment: .firstTextBaseline, spacing: 20) {
               Text("VStack")
               Text("HStack")
               Text("ZStack")
           }
       }
       ZStack(alignment: .bottom) {
           Image("swift")
               .resizable()
               .frame(width: 300, height: 170)
           Text("Swfit UI")
       }
   }
}

Stackを使うと、ビューのまとまりがわかりやすくレイアウトできますね🎉

SwiftUI勉強中

SwiftUI徹底入門という本で勉強中です！
はじめてSwiftUIを使う方でも、とても丁寧に解説してくださっているのでわかりやすいです😀
パラダイムシフトに乗り遅れるな〜！🏃‍♀️

SwiftUI 徹底入門