List ― 一覧を作る

導入

アプリの定番、スクロールする一覧。SwiftUIでは List に部品を並べるだけで、iOSらしい行スタイルの一覧ができあがります。

説明

List { ... } の中に行を並べます。1行はViewなら何でもOK。Label を使えばアイコン付きの行になります。

struct ContentView: View {
    var body: some View {
        List {
            Label("ホーム", systemImage: "house.fill")
            Label("お気に入り", systemImage: "star.fill")
            Label("カート", systemImage: "cart.fill")
            Label("設定", systemImage: "gearshape.fill")
        }
    }
}

List は自動で、行の区切り線・スクロール・iOS標準の余白を付けてくれます。自分でレイアウトを細かく指定しなくても、「一覧らしい見た目」になるのが強みです。

行の中身は自由なので、HStack で「アイコン＋タイトル＋右端の数字」のような凝った行も作れます。

やってみよう

行を足したり減らしたり、systemImage のアイコン名を変えたりして、一覧の見た目を変えてみましょう。

演習

List の中に、Label で「プロフィール」という行（アイコンは person.fill）を1つ足してください。