はじめに
SwiftUI のコンテナをまとめます。
いつかの自分の、読んでくれた誰かの役に立てば幸いです。
今日がクリスマスなので少しクリスマス要素を入れてみました。
この記事でいう「コンテナ」の範囲
- 中に View を入れて配置・管理する View を対象（いわゆる container views）
-
WindowGroupなどの Scene レベルのコンテナは対象外 -
GeometryReaderはこの記事では取り扱っていません
SwiftUI コンテナ（View）一覧
レイアウト系（並べる・重ねる）
HStack
子 View を横方向に並べる。
VStack
子 View を縦方向に並べる。
ZStack
子 View を重ねて配置する。
LazyHStack / LazyVStack
表示が必要になった View のみを生成する遅延評価スタック。
主にScrollView内で使用
Grid（iOS 16+）
行と列を明示して配置できる固定的なグリッドレイアウト。
自動で折り返しはしてくれません
LazyVGrid / LazyHGrid
スクロールを前提とした遅延評価のグリッドレイアウト。
ViewThatFits
表示領域に収まる View を自動で選択するレスポンシブ向けコンテナ。
（画像では分かりにくいため、詳細は別途解説予定）
スクロール系
ScrollView
中の View をスクロール可能にする。
ScrollViewReader
スクロール位置をコードから操作するための補助コンテナ。
主に proxy.scrollTo(...) による位置操作を目的として使用される。
コード
struct ScrollViewReaderDemo: View {
var body: some View {
ScrollViewReader { proxy in
VStack(spacing: 16) {
HStack {
Button("⬆️ Top") {
withAnimation {
proxy.scrollTo(1, anchor: .top)
}
}
Button("🎄 Middle") {
withAnimation {
proxy.scrollTo(15, anchor: .center)
}
}
Button("⬇️ Bottom") {
withAnimation {
proxy.scrollTo(30, anchor: .bottom)
}
}
}
ScrollView {
LazyVStack(spacing: 12) {
ForEach(1...30, id: \.self) { i in
Text("🎅 Item \(i)")
.font(.title3)
.frame(maxWidth: .infinity)
.padding()
.background(Color.green.opacity(0.15))
.cornerRadius(12)
.id(i)
}
}
.padding()
}
}
.navigationTitle("ScrollViewReader")
.padding()
}
}
}
リスト / フォーム系
List
縦方向の一覧を表示するためのコレクション用コンテナ。
Form
設定画面などで使われる入力 UI 向けのコンテナ。
Section
項目を論理的に区切るためのコンテナ（ヘッダー / フッターを付与可能）。
親コンテナによって見え方や振る舞いが異なる。
-
List/Form内では見出し付きのまとまりとして使われることが多い -
LazyVGrid/LazyHGridではpinnedViews: [.sectionHeaders]によりヘッダーの固定が可能 -
Grid（iOS 16+）内では行のまとまりを表現する用途になりやすい
OutlineGroup
ツリー構造データを元に、階層的な一覧を表示する。
DisclosureGroup
中身を開閉できるまとまりを作る。
グルーピング系
Group
見た目を変えずに View をまとめる。
主に View 数制限の回避や、一括修飾のために使われる。
GroupBox
枠とラベル付きで視覚的なまとまりを作る。
ControlGroup
関連する操作を 1 つの操作グループとして扱う。
状態表示（空 / エラー）
ContentUnavailableView（iOS 17+）
検索結果がゼロ、ネットワークエラーなど
「コンテンツが表示できない状態（Empty State）」を表現するための View。
表（カラム）
Table（iOS 16+ / iPadOS / macOS）
複数列（カラム）を持つ表形式のデータを表示する。
List よりも表構造を明確に表現したい場合に有効。
タブ
TabView
複数の画面をタブで切り替える。
ナビゲーション
NavigationStack
画面をスタック構造で管理する（push / pop）。
NavigationSplitView
サイドバーと詳細を持つ 2〜3 カラム構成のナビゲーション。
macOS 向け 分割コンテナ
※ シミュレーター都合により画像は省略
-
HSplitView：左右に分割し、ドラッグでサイズ調整可能 -
VSplitView：上下に分割し、ドラッグでサイズ調整可能
一覧まとめ
| カテゴリ | コンテナ | ざっくり用途 |
|---|---|---|
| スタック |
HStack / VStack / ZStack
|
横 / 縦 / 重ねる |
| 遅延スタック |
LazyHStack / LazyVStack
|
大量表示を軽く |
| グリッド | Grid |
行列でレイアウト |
| 遅延グリッド |
LazyVGrid / LazyHGrid
|
スクロール × 大量セル |
| レスポンシブ | ViewThatFits |
入るレイアウトを自動採用 |
| スクロール | ScrollView |
スクロールできる器 |
| スクロール制御 | ScrollViewReader |
位置操作 |
| リスト | List |
一覧表示 |
| 区切り | Section |
項目のまとまり |
| フォーム | Form |
設定画面系 |
| ツリー | OutlineGroup |
階層構造 |
| 開閉 | DisclosureGroup |
折りたたみ UI |
| グループ | Group |
見た目を変えずにまとめる |
| 枠付き | GroupBox |
視覚的なまとまり |
| 操作 | ControlGroup |
操作をまとめる |
| 空状態 | ContentUnavailableView |
Empty State 表示 |
| 表 | Table |
表形式のデータ表示 |
| タブ | TabView |
画面切り替え |
| ナビ |
NavigationStack / NavigationSplitView
|
push/pop / 2–3 カラム |
| mac 分割 |
HSplitView / VSplitView
|
分割＋リサイズ |
最後に
ここまで読んでくださった皆様、ありがとうございます。
以上SwiftUIにおけるコンテナについてまとめてみました。知らないものも多く調べながらだったので間違い等があれば気軽にコメントお願いします。
MerryXmas🎄