SwiftUI の List は listStyle モディファイアでさまざまな見た目に変更できます。用途やプラットフォームに応じて適切なスタイルを選びましょう。
主要な ListStyle
List { Text("項目1") Text("項目2") Text("項目3") } .listStyle(.insetGrouped) // スタイルを指定
各スタイルの特徴
.automatic
プラットフォームとコンテキストに応じた標準スタイル。iOS では通常 .insetGrouped 相当になる。
.plain
区切り線のみのシンプルなスタイル。セクションヘッダーは上部に固定される。UITableView の .plain に相当。
.inset
左右にマージンがあるシンプルなスタイル。macOS でよく使われる。
.grouped
グループ化されたスタイル。iOS 13 時代の設定アプリ風。現在は .insetGrouped の方が主流。
.insetGrouped
角丸のカードのようなグループスタイル。iOS の設定アプリで使われている見た目。Section との相性が良い。
.sidebar
macOS や iPadOS のサイドバー向けスタイル。NavigationSplitView のサイドバーで使用。
スタイルの比較
struct StyleComparisonView: View { var body: some View { TabView { sampleList .listStyle(.plain) .tabItem { Text("Plain") } sampleList .listStyle(.insetGrouped) .tabItem { Text("InsetGrouped") } sampleList .listStyle(.inset) .tabItem { Text("Inset") } } } var sampleList: some View { List { Section("セクション1") { Text("項目A") Text("項目B") } Section("セクション2") { Text("項目C") Text("項目D") } } } }
使い分けの指針
| スタイル | 用途 |
|---|---|
| .plain | シンプルな一覧表示、メッセージリスト |
| .insetGrouped | 設定画面、フォーム |
| .sidebar | サイドバーナビゲーション（iPad/Mac） |
| .automatic | デフォルト、特にこだわりがない場合 |
iOS と macOS の違い
同じスタイルでも、プラットフォームによって見た目が異なることがあります。.automatic を使うと、各プラットフォームに最適なスタイルが自動的に選ばれます。
List { ForEach(1...10, id: \.self) { i in Text("項目 \(i)") } } .listStyle(.automatic) // プラットフォームに任せる
Section との組み合わせ
スタイルによって Section の見た目も変わります。特に .insetGrouped と .plain では大きく異なります。
.insetGrouped + Section
各セクションがカード状に分離され、間にスペースが入る
.plain + Section
セクションヘッダーはスクロール時に上部に固定され、区切り線は連続する
アプリの設計に合わせて ListStyle を選択することで、ユーザーにとって使いやすい UI を構築できます。設定画面には .insetGrouped、データ一覧には .plain というように、コンテンツの性質に応じて使い分けましょう。
