Sponsor Link
環境&対象
- macOS Monterey 12.5 Beta
- Xcode 14.0 beta
- iOS 16.0 beta
# 動作確認環境は beta 版ですが、この記事では、beta 版で提供されている新規機能は使っていません。
VStack
VStack は、与えられたビューを縦方向に並べる機能を持ったビューです。
VStack のシンプルな使い方
VStack を使うと 例えば 以下のように 赤 青 黄 の四角いビューを縦方向に並べることができます。

struct ContentView: View {
var body: some View {
VStack {
Color.red.frame(width: 200, height: 200)
Color.blue.frame(width: 100, height: 200)
Color.yellow.frame(width: 300, height: 200)
}
}
}
# この後 レイアウト等を変更した時にわかりやすくするために、赤 青 黄 で幅を変えています。
この例では、VStack に 3つのビューを与えられています。VStack は、与えられた3つのビューを順番に縦方向に並べています。
VStack の initializer
VStack は、上記のように 引数なしで作成/使用することもできますが、initializer を使って幾つかのオプションを指定して使用することもできます。
どのようなオプションがあるのか initializer を確認してみます。
Apple のドキュメントは、こちら。
ありがたいこと(?)に、1つしかありません。
init(
alignment: HorizontalAlignment = .center,
spacing: CGFloat? = nil,
content: () -> Content
)
引数を3つ目から逆順に見ていきます。
content は、VStack によって並べるビューです。
ですので、最初の例を すべての引数名もつけて指定すると以下のようになります。
struct ContentView: View {
var body: some View {
VStack(content: {
Color.red.frame(width: 200, height: 200)
Color.blue.frame(width: 100, height: 200)
Color.yellow.frame(width: 300, height: 200)
})
}
}
initializer を確認するとわかりますが、content にはデフォルトは指定されていませんので、VStack を使用する時に省略することはできません。
また、content に与えられるビューは、最大10個です。
# 直接与えられるビューが最大10であるだけで、Group 等を使用して階層化すると実質の数を増やすことは可能です。
content 以外の残りのオプションも見ていきます。
VStack での spacing 指定
2つ目に指定できるオプションは、spacing です。VStack では複数の要素を縦方向に並べることができますが、そのときの要素間のスペースを指定できます。
例えば、隙間なく並べるために spacing: 0 を指定すると以下のようになります。

struct ContentView: View {
var body: some View {
VStack(spacing:0) { // - spacing:0 指定
Color.red.frame(width: 200, height: 200)
Color.blue.frame(width: 100, height: 200)
Color.yellow.frame(width: 300, height: 200)
}
}
}
VStack での alignment 指定
最後に説明するオプションは、alignment です。
VStack では複数の要素を縦方向に並べます。その際 縦方向の並べ方/隙間の開け方は spacing で指定しました。
横方向に対してどのように揃えるかについての指定が、alignment です。
alignment が受け取るデータは、HorizontalAlignment という型で、.leading, .center, .trailing という値を指定できます。initializer を確認すると デフォルト値が、.center になっていることがわかります。
ですので、これまでの配置例をあらためて確認してみると、各色の四角の(横方向の)中心が一致している配置になっています。

例えば、各色の四角の(横方向の)開始位置を一致するように配置するためには、.leading を指定します。

struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Color.red.frame(width: 200, height: 200)
Color.blue.frame(width: 100, height: 200)
Color.yellow.frame(width: 300, height: 200)
}
}
}
終了位置を一致するように配置するためには、.trailing を指定することになります。
HStack との組み合わせで Excel レイアウトが可能に
ここまでに見てきたものが、VStack のすべてです。
縦方向に配置する VStack と同様に 横方向に配置する HStack というものがあり、この2つの Stack がレイアウトの基本になります。
縦横方向にレイアウトする方法があれば、表計算ソフト Excel を駆使して レイアウトを行う いわゆるエクセルレイアウト と同じように たいていのレイアウトは作成することができます。
まとめ
SwiftUI で UI をレイアウトしようとする時に基本となる VStack をあらためて説明しました。
- VStack は与えられたビューを縦方向に並べる
- VStack は、縦方向に並べる時に spacing で指定された値のスキマをつくる
- VStack は、縦方向に並べるときの横方向は、alignment で指定された揃えを行う
説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。
SwiftUI おすすめ本
SwiftUI を理解するには、以下の本がおすすめです。
# SwiftUI2.0 が登場したことで少し古くなってしまいましたが、いまでも 定番本です。
Sponsor Link