【SwiftUI】[基本編]Listの使い方

概要

SwiftUIでViewをリスト表示するには、Listの基本的な使い方を紹介します。

環境

Xcode　13.3.1
Swift 5.6

リスト

リストの表示

最も簡単なリスト表示です。
List{}内にビューを表示するコードを書くとリストが１行ずつ表示されます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("Row 1")
            Text("Row 2")
            Text("Row 3")
        }
    }
}

セクションの表示

セクションに分けて表示するにはSection{}内にビューを表示するコードを書きます。

struct ContentView: View {
    var body: some View {
        List {
            Section(
                header: Text("Section header 1"),
                footer: Text("Section footer 1")) {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
            Section(
                header: Text("Section header 2"),
                footer: Text("Section footer 2")) {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
            Section(
                header: Text("Section header 3"),
                footer: Text("Section footer 3")) {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
        }
    }
}

リストのスタイル

リストのスタイルを変更するにはlistStyle()を使用します。

DefaultListStyle()

DefaultListStyle()はlistStyle()指定なしと同じです。

struct ContentView: View {
    var body: some View {
        List {
            Section(header: Text("Section 1")) {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
            Section(header: Text("Section 2")) {
                Text("Row 1")
                Text("Row 2")
                Text("Row 3")
            }
        }
        .listStyle(DefaultListStyle())
    }
}

GroupedListStyle()

グループ化されたリスト表示のスタイルです。

struct ContentView: View {
    var body: some View {
        List {
            ・・・
        }
        .listStyle(GroupedListStyle())
    }
}

InsetListStyle()

はめ込みのリスト表示のスタイルです。

struct ContentView: View {
    var body: some View {
        List {
            ・・・
        }
        .listStyle(InsetListStyle())
    }
}

InsetGroupedListStyle()

はめ込み+グループ化のリスト表示のスタイルです。

struct ContentView: View {
    var body: some View {
        List {
            ・・・
        }
        .listStyle(InsetGroupedListStyle())
    }
}

PlainListStyle()

装飾なしのリスト表示のスタイルです。

struct ContentView: View {
    var body: some View {
        List {
            ・・・
        }
        .listStyle(PlainListStyle())
    }
}

SidebarListStyle()

折りたたみ可能なリスト表示のスタイルです。

struct ContentView: View {
    var body: some View {
        List {
            ・・・
        }
        .listStyle(SidebarListStyle())
    }
}

配列のリスト表示

ForEachで指定範囲をループ

配列の0番目から配列の個数分ループする方法です。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "いちご"]
    var body: some View {
        List {
            ForEach(0 ..< 3) { index in
                Text(fruits[index])
            }
        }
    }
}

count()で配列の個数を動的に取得してループすることもできます。
この場合、以下のような fruits.count が定数ではないという警告が出ます。

Non-constant range: argument must be an integer literal

警告が出ないようにするには第二引数に id: \.self を指定します。
id: \.self については後ほど詳しく書きます。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "いちご"]
    var body: some View {
        List {
            ForEach(0 ..< fruits.count, id: \.self) { index in
                Text(fruits[index])
            }
        }
    }
}

ForEachでインデックスを取得してループ

配列のインデックスを取得してループする方法です。
配列のインデックスを取得には indices を使います。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "いちご"]
    var body: some View {
        List {
            ForEach(fruits.indices, id: \.self) { index in
                Text(fruits[index])
            }
        }
    }
}

配列から要素を順に取得

ForEach(配列)で配列から要素を順に取り出すこともできます。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "いちご"]
    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
    }
}

クロージャで要素を直接取得

List(配列)で配列から要素を直接取り出すこともできます。

struct ContentView: View {
    let fruits = ["りんご", "みかん", "いちご"]
    var body: some View {
        List (fruits, id: \.self) { fruit in
            Text(fruit)
        }
    }
}