ForEach ― データの数だけ行を作る

導入

一覧の行を1つずつ手書きするのは非現実的。データの配列から 数だけ自動で 行を作るのが ForEach です。

説明

ForEach(配列, id: \.self) { 要素 in ... } で、配列の要素ごとに行を生成します。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "ぶどう", "いちご", "もも"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Label(fruit, systemImage: "leaf.fill")
            }
        }
    }
}

fruit in の fruit が、各回の要素。fruits に果物を足すと、行も自動で増えます。データと画面が連動するのがSwiftUIの本質です。

実際のアプリでは、行のデータは struct のモデルで表します。そのとき「どの行か」を見分けるために Identifiable（第4章のprotocol）に準拠させ、id を持たせます。

struct Fruit: Identifiable {
    let id = UUID()      // 一意なID
    let name: String
}
// ForEach(fruits) { fruit in Text(fruit.name) }  ← id 指定が不要になる

Identifiable にしておくと ForEach(fruits) だけで書け（id: を省ける）、行の追加・削除・並べ替えも正しく扱えます。

やってみよう

fruits 配列に要素を足したり減らしたりして、リストの行数が自動で変わるのを確かめましょう。systemImage を変えてアイコンも変えてみてください。

演習

fruits を自分の好きなもの5つの配列に置き換えて、5行のリストを表示してください。