（2021/7/2 更新）
Listはデータの一覧表示をするのに適したViewです。
画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。
ListはForEachとセットで使うケースが多いので、先にこちらを読んで理解しておくことをおすすめします。
環境
この記事の情報は次のバージョンで動作確認しています。
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.1
静的リストの生成
一覧に表示したいViewをListに並べるだけで静的リストが生成できます。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct ContentView: View { var body: some View { List { Text("大根") Text("キャベツ") Text("じゃがいも") } } } |
動的リストの生成
ForEachを使うと配列などから動的に一覧を生成できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
struct ContentView: View { let fruits = ["りんご", "オレンジ", "バナナ"] var body: some View { List { ForEach(0 ..< fruits.count) { index in Text(fruits[index]) } } } } |
静的リストと動的リストの混在
静的行と動的行の混在も可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
struct ContentView: View { let fruits = ["りんご", "オレンジ", "バナナ"] var body: some View { List { Text("大根") Text("キャベツ") Text("じゃがいも") ForEach(0 ..< fruits.count) { index in Text(fruits[index]) } } } } |
リストのグループ化
Formと同じ様にSectionと組み合わせて、リストをグループ化できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
struct ContentView: View { let fruits = ["りんご", "オレンジ", "バナナ"] var body: some View { List { Section(header: Text("やさい")){ Text("大根") Text("キャベツ") Text("じゃがいも") } Section(header: Text("くだもの")) { ForEach(0 ..< fruits.count) { index in Text(fruits[index]) } } } } } |
ヘッダーに英字を使う場合の注意点（iOS14から）
iOS14からヘッダーで英字を使うと、デフォルトが大文字表示になります。
大文字変換させたくない場合は、次のように textCase() モディファイアを指定して下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
struct ContentView: View { var body: some View { List { Section(header: Text("Vegetables")){ Text("大根") Text("キャベツ") Text("じゃがいも") } .textCase(nil) // テキスト表示を変更せずそのまま表示 Section(header: Text("Fruits")) { Text("りんご") Text("オレンジ") Text("バナナ") } } } } |
シンプルな動的リスト
単一ループによる動的リストであれば、ForEachを使わずにListのみでも生成できます。
使い方はForEachと同じで、「範囲指定」と「id指定」のどちらも可能。
行の削除や入れ替えには対応できない為、使える範囲は限定されます。
単純な動的リストを出力する為のシンプルな表記方法です。
※注意：シンプルな動的リストを使った場合Sectionが正しいヘッダー表示になりません。その場合はList+ForEachを使用して下さい。
|
1 2 3 4 5 6 7 8 9 10 |
struct ContentView: View { let fruits = ["りんご", "オレンジ", "バナナ"] var body: some View { List(fruits, id: \.self) { fruit in Text(fruit) } } } |
表示スタイルの指定
|
1 2 3 |
.listStyle(スタイル指定) |
listStyleモディファイアを使ってListの表示スタイルを指定可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
struct ContentView: View { var body: some View { List { Section(header: Text("やさい")){ Text("大根") Text("キャベツ") Text("じゃがいも") } Section(header: Text("くだもの")) { Text("りんご") Text("オレンジ") Text("バナナ") } } .listStyle(PlainListStyle()) // Listの表示スタイル指定 } } |
PlainListStyle()
iOSでのデフォルトスタイル。
スタイル未指定、あるいはDefaultListStyle()が指定された場合もこのスタイルが適用されます。
GroupedListStyle()
グループ化されたリストの表示スタイル。
InsetGroupedListStyle()
はめ込みグループ化リストの表示スタイル。
リストの周りにマージンが適用される。
iOS14以降で使えるようになった。
InsetListStyle()
はめ込みリストの表示スタイル。
リストの周りにマージンが適用される。
iOS14以降で使えるようになった。
SidebarListStyle()
サイドバー用のスタイル。
リストを折りたたむ事が可能。
iOS14以降で使えるようになった。
リストの最後に空白を挿入する
Spacer()を使ってリストの最後に空白を挿入可能です。
引数minLengthで空白のサイズを指定します。
サイズ指定がない場合は１行分のみ挿入されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
struct ContentView: View { var body: some View { List { ForEach(1 ..< 101) { index in Text("\(index)行目") } /// リストの最後に空白を入れる Spacer(minLength: 200) } } } |
あわせて読みたい記事
