【SwiftUI】スタックView

スタックView

名称があっているか分からないが以下のスタックに記載されているViewについてまとめる。

VStack

HStack

ZStack

ZStack image

ZStackイメージ図

使用してみる

ダメなパターン

VStack, HStack, ZStackを以下のように同一階層に並べられない。
この場合、VStackが表示される。
これは、bodyはViewを1つ返す計算プロパティのため。

【SwifUI】計算プロパティ - おっさんの備忘録

var body: some View {
  VStack {
    Text("VStack")
  }
  HStack {
   Text("HStack")
  }
  ZStack {
    Text("ZStack")
  }
}

OKなパターン

以下のようにいずれかの子要素になら同一階層に並べられる。

var body:some View {
  VStack {
    Text("First Line.")
    
    ZStack {
      Circle()
        .frame(width: 150, height: 150, alignment: .center)
        .foregroundColor(.orange)
      Text("Hello, World")
    }
    HStack {
      Text("Second")
      Text("Line")
    }
  }
}