【SwiftUI】HStack・VStack・ZStackで、Viewの配置を変更する方法を解説

Stackの実装

Viewを横に並べて表示する(HStack)

Viewを横並びに配置するには、HStackを使用します。HStackは、以下のように実装します。

HStack {
　　View
　　View
　　...
}

{}内に、横並びで表示させたいViewを実装します。

以下は、ImageとTextを横並びに表示させるサンプルコードです。

Viewを縦に並べて表示する(VStack)

Viewを縦並びに配置するには、VStackを使用します。VStackは、以下のように実装します。

VStack {
　　View
　　View
　　...
}

{}内に、縦並びで表示させたいViewを実装します。

以下は、ImageとTextを縦並びに表示させるサンプルコードです。

Viewを重ねて表示する(ZStack)

Viewを重ねて表示するには、ZStackを使用します。ZStackは、以下のように実装します。

ZStack {
　　View
　　View
　　...
}

{}内に、重ねて表示させたいViewを実装します。後に実装したViewが上に重なっていきます。

以下は、ImageとTextを重ねて表示させるサンプルコードです。

Stackのカスタマイズ

Viewの揃え位置を指定する

Viewの揃え位置を指定するには、alignment: を引数に追加します。指定できる値は、Stack毎に異なります。

HStackの場合

HStackで指定できるalignmentは、以下の5つです。

何も指定しなかった場合は、.cneterが適応されます。

VStackの場合

VStackで指定できるalignmentは、以下の3つです。

何も指定しなかった場合は、.cneterが適応されます。

ZStackの場合

ZStackで指定できるalignmentは、以下の9つです。

何も指定しなかった場合は、.cneterが適応されます。

View同士の間隔を指定する

View同士の間隔を指定するには、spacing: を引数に追加します。

何も指定しなかった場合、HStackは間隔が開いており、VStackは間隔が閉じておりました。

Spacerで間隔を調整する

最後に、Spacerを実装し、Viewの間隔を調整する方法を紹介致します。

HStackで2つのTextを横並びに表示させ、片方は左、もう片方は右に寄せて表示する時などに使用します。

以上、StackでViewを配置する方法についてでした。