（2020/11/22 更新）
Listはデータの一覧表示をするのに適したViewです。
画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。
ListはForEachとセットで使うケースが多いので、先にこちらを読んで理解しておくことをおすすめします。
【SwiftUI】ForEachの使い方（1/2）
ForEachは繰り返し処理の中で、Viewを生成する仕組みです。名前の配列をループしてそれぞれをTextView化する、あるいはメニュー項目に追加するなどの動きを実現します。加えて、ForEachを使うとViewを手動で追加した場合に...
capibara1969.com
2020.01.09
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】12.2
【Swift】5.3.1
【iOS】14.2
【macOS】Catalina バージョン 10.15.7
【Swift】5.3.1
【iOS】14.2
【macOS】Catalina バージョン 10.15.7
静的リストの生成
一覧に表示したい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(self.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(self.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(self.fruits[index]) } } } } } |
シンプルな動的リスト
単一ループによる動的リストであれば、ForEachを使わずにListのみでも生成できます。
使い方はForEachと同じで、「範囲指定」と「id指定」のどちらも可能。
行の削除や入れ替えには対応できない為、使える範囲は限定されます。
単純な動的リストを出力する為のシンプルな表記方法です。
|
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以降で使えるようになった。
あわせて読みたい記事
【SwiftUI】Listの行削除
（2020/05/9 更新）Listで生成したデータ一覧の行削除処理について解説します。
capibara1969.com
2019.10.26
【SwiftUI】Listの行入れ替え
Listの行入れ替え処理の実現方法について解説します。
capibara1969.com
2020.05.08
【SwiftUI】選択可能なListの生成
選択可能なListを生成する方法を解説します。
capibara1969.com
2020.11.23
