【SwiftUI】Listの使い方

Listはデータの一覧表示をするのに適したViewです。
画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。

ListはForEachとセットで使うケースが多いので、先にこちらを読んで理解しておくことをおすすめします。

ForEachは繰り返し処理の中で、Viewを生成する仕組みです。名前の配列をループしてそれぞれをTextView化する、あるいはメニュー項目に追加するなどの動きを実現します。加えて、ForEachを使うとViewを手動で追加した場合に...

環境
静的リストの生成
動的リストの生成
静的リストと動的リストの混在
リストのグループ化
シンプルな動的リスト
あわせて読みたい記事

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.4.1
【Swift】5.2
【iOS】13.4.1
【macOS】Catalina バージョン 10.15.4

静的リストの生成

一覧に表示したいViewをListに並べるだけで静的リストが生成できます。

struct ContentView: View {

var body: some View {

List {

Text("大根")

Text("キャベツ")

Text("じゃがいも")

}

動的リストの生成

ForEachを使うと配列などから動的に一覧を生成できます。

struct ContentView: View {

let fruits = ["りんご", "オレンジ", "バナナ"]

var body: some View {

List {

ForEach(0 ..< fruits.count) { index in

Text(self.fruits[index])

}

静的リストと動的リストの混在

静的行と動的行の混在も可能です。

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と組み合わせて、リストをグループ化できます。

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指定」のどちらも可能。

行の削除や入れ替えには対応できない為、使える範囲は限定されます。
単純な動的リストを出力する為のシンプルな表記方法です。

struct ContentView: View {

let fruits = ["りんご", "オレンジ", "バナナ"]

var body: some View {

List(fruits, id: \.self) { fruit in

Text(fruit)

}

あわせて読みたい記事

【SwiftUI】Listの行削除

（2020/05/9 更新）Listで生成したデータ一覧の行削除処理について解説します。

【SwiftUI】Listの行入れ替え

Listの行入れ替え処理の実現方法について解説します。

【SwiftUI】ForEachの使い方（1/2）