一番単純なレイアウトをやっていきます。縦方向に並べるのと横方向に並べるのとをやってみましょう。

VStack

 最初、新しいプロジェクトを作った時にすでにVStackが使われています。

  VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }

この場合はimage()とText()という部品を縦方向に並べています。

これはモディファイアと呼ばれるものでこの場合はImage()を修飾する役割をしています。

".imageScale(.)"とすると下に使えるものが出てきます。".large"が使われていて、あとmediumとsmallが使えるよということです。試しに違うものに変えて実行してみましょう。画像の大きさが変わります。

同じように".foregroundColor"も試してみましょう。

HStack

次にVStackをHStackに変えてみましょう。

 HStack{
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }

として実行すると

横向きになりました。VStackは縦、HStackは横向きに配置してくれるものです。

次にImage()とText()の間にSpacer()を入れてみましょう。

端っこに離れてしまいました。真ん中にスペースを作るものです。VStackですると上下に分かれます。

Spacer()を置いたところにスペースができるので配置している画像などがそれにより位置が変わります。

ZStack

縦横ときたらあとは奥行きです。ZStackを使ってみましょう。

struct ContentView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200)
            Rectangle()
                .foregroundColor(.white)
                .frame(width: 150, height: 150)
  
        }
    }
}

これを実行すると

となります。四角の中の四角が入っています。ZStackは重なりを作る時に使います。