Swift UI の ListStyle
iOS の場合、デフォルトのリスト スタイル ( .automatic
) は です.insetGrouped
。
リスト.automatic
スタイルは、スタイルの選択を SwiftUI の手に任せたことを意味します。SwiftUI は、コンテキストに適したものを選択します。
これは、iPhone、iPad、Mac などのプラットフォームや、リスト ビューが使用されている場所によって異なる場合があります。
iOS リストスタイル
SwiftUI は、プラットフォームによって異なる多くのスタイルをサポートしています。
この記事では、iOS のみに焦点を当てます。6 つのオプションがあります。
- .自動
- .insetGrouped
- .グループ化
- .はめ込み
- 。プレーン
- .サイドバー

SwiftUI は、プラットフォームによって異なる多くのスタイルをサポートしています。
この記事では、iOS のみに焦点を当てます。6 つのオプションがあります。
- .自動
- .insetGrouped
- .グループ化
- .はめ込み
- 。プレーン
- .サイドバー
NavigationStack {
List {
Section {
Text("First")
Text("Second")
Text("Third")
} header: {
Text("First Section Header")
} footer: {
Text("Eos est eos consequatur nemo autem in qui rerum cumque consequatur natus corrupti quaerat et libero tempora.")
}
Section {
Text("One")
Text("Two")
Text("Three")
} header: {
Text("Second Section Header")
} footer: {
Text("Tempora distinctio excepturi quasi distinctio est voluptates voluptate et dolor iste nisi voluptatem labore ipsum blanditiis sed sit suscipit est.")
}
Section {
Text("1")
Text("2")
Text("3")
} header: {
Text("Third Section Header")
} footer: {
Text("Ea consequatur velit sequi voluptatibus officia maiores ducimus consequatur rerum enim omnis totam et voluptates eius consectetur rerum dolorem quis omnis ut ut.")
}
}
.navigationTitle("List Style")
// This is the only difference.
.listStyle(.insetGrouped)
}
前述のように、SwiftUI は、自動 ( ) を設定する場合、またはiOS でInset Grouped スタイルを使用します。.automatic
DefaultListStyle
List {
// ...
}
// Leave blank or .listStyle(.automatic) yield the same result in iOS.
.listStyle(.automatic)
.insetGrouped
グループ化されたインセットまたはの例InsetGroupedListStyle
。
List {
// ...
}
.listStyle(.insetGrouped)
.grouped
グループ化されたまたはの例GroupedListStyle
。
List {
// ...
}
.listStyle(.grouped)
.inset
インセットまたはの例InsetListStyle
。
List {
// ...
}
.listStyle(.inset)
.plain
プレーンまたはの例PlainListStyle
。
List {
// ...
}
.listStyle(.plain)
サイドバー スタイル (.sidebar
または) には特別な機能SidebarListStyle
が備わっています。macOS および iOS では、サイドバー リスト スタイルにより、ユーザーがセクションを折りたたんだり展開したりできるようにするセクション ヘッダーに開示インジケーターが表示されます。
List {
// ...
}
.listStyle(.sidebar)
