[SwiftUI] List の使用方法

List はデータの一覧を表示させることができます。
今回は、この List の使用方法について説明します。

List の使用方法

環境

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

List の基本使用方法

List の最も基本的な使用方法は、一覧に表示したい VIew を列挙することです。

List {
  // 表示したい View
  // 表示したい View
  // 表示したい View
    :
  // 表示したい View
}

以下の例は5つの View（Text）を表示する例です。
Listを使用して複数の View を表示すると、View とView の間に線が引かれます。

struct ContentView: View {
    var body: some View {
        List {
            Text("リンゴ🍎")
            Text("ミカン🍊")
            Text("バナナ🍌")
            Text("ぶどう🍇")
            Text("パイナップル🍍")
        }
    }
}

List の基本例

配列の要素を取得して List を作成する

ForEach で配列を要素を取得すれば、一気に List に表示する項目を作成することができます。
以下に例を示します。
この例では、ForEach を使用し、 fruit 配列から果物の名前を取得して List に表示する項目鵜を作成しています。このとき、「0..<3」と範囲を指定をしていますので、配列から3つの値を取得して表示しています。

struct ContentView: View {
    let fruit = ["リンゴ🍎",　"ミカン🍊",　"バナナ🍌",　"ぶどう🍇",　"パイナップル🍍"]
    var body: some View {
        List {
            ForEach (0..<3){ index in
                Text(fruit[index])
            }
        }
    }
}

配列の要素を取得して List を作成する例

配列の要素を全て取得して List を作成する

先程の例では ForEach を使用して配列の値を取得しましたが、List のイニシャライザには、配列を直接取得する方法が備わっています。配列の要素が文字列の場合には「\.self」を指定して値を取り出すことができます。

List(配列, id: \.self) { item in
  // 表示したい View
}

以下の例では、配列 fruit の要素を全て取り出して、List に表示をしています。

struct ContentView: View {
    let fruit = ["リンゴ🍎","ミカン🍊","バナナ🍌","ぶどう🍇","パイナップル🍍"]
    var body: some View {
        List(fruit, id: \.self) { item in
            Text(item)
        }
    }
}

配列の要素を全て取得して List を作成する例