ListStyle の種類

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 というように、コンテンツの性質に応じて使い分けましょう。