List 内で Section を使うと、項目をグループ分けして見やすく表示できます。設定画面や連絡先アプリのような、カテゴリ別の一覧表示に最適です。
Section の基本
Section はヘッダーとフッターを持つグループを作成します。
struct SettingsView: View { var body: some View { List { Section("アカウント") { Text("プロフィール") Text("パスワード変更") Text("メールアドレス") } Section("通知") { Text("プッシュ通知") Text("メール通知") } } } }
引数に文字列を渡すだけで、自動的にヘッダーが表示されます。
ヘッダーとフッターのカスタマイズ
より複雑なヘッダーやフッターを作成したい場合は、header: と footer: パラメータを使います。
struct ContentView: View { var body: some View { List { Section { Text("項目1") Text("項目2") } header: { Label("重要", systemImage: "star.fill") .foregroundColor(.yellow) } footer: { Text("これらの項目は特に重要です") .font(.caption) } } } }
header と footer にはカスタムビューを渡せるため、アイコン付きのヘッダーや説明文付きのフッターを自由に作成できます。
動的なセクション
ForEach を使って、データからセクションを動的に生成することも可能です。
struct Contact: Identifiable { let id = UUID() var name: String var initial: String } struct ContactListView: View { let contacts = [ "A": [Contact(name: "Alice", initial: "A"), Contact(name: "Alex", initial: "A")], "B": [Contact(name: "Bob", initial: "B")], "C": [Contact(name: "Charlie", initial: "C")] ] var body: some View { List { ForEach(contacts.keys.sorted(), id: \.self) { key in Section(key) { ForEach(contacts[key]!) { contact in Text(contact.name) } } } } } }
Section のスタイル
ListStyle によって Section の見た目が変わります。
struct ContentView: View { var body: some View { List { Section("セクション1") { Text("項目A") Text("項目B") } Section("セクション2") { Text("項目C") Text("項目D") } } .listStyle(.insetGrouped) // iOS の設定アプリ風 } }
.automatic
プラットフォームに応じた標準スタイル
.insetGrouped
角丸のグループ化されたスタイル。iOS の設定アプリで使われている見た目。
.plain
区切り線のみのシンプルなスタイル。ヘッダーは上部に固定される。
.sidebar
macOS や iPadOS のサイドバー向けスタイル。
セクションの折りたたみ
iOS 17 以降では、セクションを折りたたみ可能にすることもできます。
struct ContentView: View { var body: some View { List { Section("折りたたみ可能", isExpanded: .constant(true)) { Text("項目1") Text("項目2") Text("項目3") } } } }
isExpanded に Binding を渡すことで、プログラムから開閉状態を制御できます。
Section を活用することで、大量のデータも整理された形で表示でき、ユーザーにとって使いやすい UI を実現できます。
