SwiftUI 要素のレイアウト調整

はじめに

今回は、SwiftUIにおける要素のレイアウト調整を紹介したいと思います。

HTMLがdisplay, positionのようなプロパティを使用することで、要素の並びを調整できるのに対して、 SwiftUIでは「Stack」を組み合わせることで、レイアウト調整を行うことができます。

Stack一覧

以下の色ブロックをレイアウト調整します。

HStack {
    Text("")
        .frame(width: 300, height: 300)
        .background(Color.red)
    Text("")
        .frame(width: 200, height: 200)
        .background(Color.blue)
    Text("")
        .frame(width: 100, height: 100)
        .background(Color.green)
}

HStack

HStackは要素を横並びにすることができます。

VStack

VStackは要素を縦並びにすることができます。

ZStack

ZStackは要素を重ね合わせることができます。