SwiftUIをはじめてみよう！ - レイアウト(1)

SwiftUIでは複数のView を組み合わせて表示させるためにいくつか仕組みが用意されています。

1. 縦方向に組み合わせることができる"VStack"。
2. 横方向に組み合わせることができる"HStack"。
3. 重ねて配置できるようする"ZStack"

VStack

縦方向に表示できるようにできます。

VStack | Apple Developer Documentation

公式サイトの例示です。縦方向に文字が連続して表示されます。

  VStack(
      alignment: .leading,spacing: 10
   ) {
      ForEach(
          1...10,  id: \.self
                  ) {
                      Text("Item \($0)")
                  }
    }

実行すると縦に

表示されます。

HStack

横方向に表示できるようにできます。

VStackと同じ例示を使ってVStackの代わりにHStackを使うと横方向に表示されます。

HStack | Apple Developer Documentation

Zstack

重ねて表示できるようになります。

新しくなったMac版"Playgrounds(version4.1)"で表示してみました。
(iPadではSwiftPlaygroundsで同じことができます)

 VStack、 HStack、 ZStackを組み合わせて表示してみます。

   VStack {
            HStack{
                Image(systemName: "sun.max")
                    .font(.system(size: 50))

                Text("晴れ")
                Image(systemName: "moon")
                    .font(.system(size: 50))
            }
            
                Text("曇り")
               
                Image(systemName: "smoke.fill")
                    .font(.system(size: 50))
            
            ZStack{
                Text("曇り")
               
                Image(systemName: "cloud")
                    .font(.system(size: 70))
                
            }
            
   }

例えばこのようなコードを実行すると

縦、横、重なりが表示されています。

Viewのレイアウトが比較的簡単に実装できます。