【SwiftUI】配列をループしてリストで表示する最も簡単な方法

今回紹介する配列のリスト表示は様々な場面で使用するため基本をしっかり覚えておきたいところです。

まずは配列ではなくリストの中身を直接書いて表示する方法から順を追って説明したいと思います。

テキストを直接書いてリストを表示する
リストの行のデザインを変更する
配列をループしてリストで表示する
まとめ
SwiftUI勉強中の方へ

テキストを直接書いてリストを表示する

List {}の括弧内に直接テキストを書くことでリストを作成することができます。
配列を表示する前にリストの見た目や基本的な動作について見ていきましょう。

struct ContentView: View {
    var body: some View {
        List {
            Text("item 01")
            Text("item 02")
            Text("item 03")
            Text("item 04")
            Text("item 05")
            Text("item 06")
            Text("item 07")
            Text("item 08")
            Text("item 09")
            Text("item 10")
        }
    }
}

リストの行のデザインを変更する

リストの行のデザインは自由にカスタムすることが可能です。

VStackやHStackを使用してテキストや画像を並べることもできます。

下の例ではメッセージアプリでよく見るアイコン、相手の名前、直近のメッセージ内容をリスト表示しています。

struct ContentView: View {
    var body: some View {
        List {
            ItemView(i: 01)
            ItemView(i: 02)
            ItemView(i: 03)
            ItemView(i: 04)
            ItemView(i: 05)
            ItemView(i: 06)
            ItemView(i: 07)
            ItemView(i: 08)
            ItemView(i: 09)
            ItemView(i: 10)
        }
    }
}

struct ItemView: View {
    var i: Int

    var body: some View {
        HStack {
            Image(systemName: "person.fill")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 30, height: 30)
                .clipShape(Circle())
            VStack {
                HStack {
                    Text("name \(i)")
                        .bold()
                    Spacer()
                }
                HStack {
                    Text("message \(i)")
                    Spacer()
                }
            }
        }
    }
}

配列をループしてリストで表示する

次はいよいよ配列の中身を順番に表示する方法です。

先ほどの例と同様にメッセージアプリの様に表示してみます。

配列にはアイコンの画像名、相手の名前、直近のメッセージ内容を格納します。

struct Item: Identifiable {
    var id: Int
    var img: String
    var name: String
    var message: String
}

var Array: [Item] = [
    Item(id: 1, img: "01", name: "ユーザー01", message: "メッセージ01"),
    Item(id: 2, img: "02", name: "ユーザー02", message: "メッセージ02"),
    Item(id: 3, img: "03", name: "ユーザー03", message: "メッセージ03"),
    Item(id: 4, img: "04", name: "ユーザー04", message: "メッセージ04"),
    Item(id: 5, img: "05", name: "ユーザー05", message: "メッセージ05"),
    Item(id: 6, img: "06", name: "ユーザー06", message: "メッセージ06"),
    Item(id: 7, img: "07", name: "ユーザー07", message: "メッセージ07"),
    Item(id: 8, img: "08", name: "ユーザー08", message: "メッセージ08"),
    Item(id: 9, img: "09", name: "ユーザー09", message: "メッセージ09"),
    Item(id: 10, img: "10", name: "ユーザー10", message: "メッセージ10"),
    Item(id: 11, img: "11", name: "ユーザー11", message: "メッセージ11"),
    Item(id: 12, img: "12", name: "ユーザー12", message: "メッセージ12"),
    Item(id: 13, img: "13", name: "ユーザー13", message: "メッセージ13"),
    Item(id: 14, img: "14", name: "ユーザー14", message: "メッセージ14"),
    Item(id: 15, img: "15", name: "ユーザー15", message: "メッセージ15"),
    Item(id: 16, img: "16", name: "ユーザー16", message: "メッセージ16"),
    Item(id: 17, img: "17", name: "ユーザー17", message: "メッセージ17"),
    Item(id: 18, img: "18", name: "ユーザー18", message: "メッセージ18"),
    Item(id: 19, img: "19", name: "ユーザー19", message: "メッセージ19"),
    Item(id: 20, img: "20", name: "ユーザー20", message: "メッセージ20")
]

用意した配列をループしてリストで一覧表示します。

struct ContentView: View {
    var body: some View {
        List(Array) { item in
            HStack {
                Image(systemName: "person.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 30, height: 30)
                    .clipShape(Circle())
                VStack {
                    HStack {
                        Text("\(item.name)")
                            .bold()
                        Spacer()
                    }
                    HStack {
                        Text("\(item.message)")
                        Spacer()
                    }
                }
            }
        }
    }
}

まとめ

今回はリスト表示の基本的な使用方法を紹介しました。

直接記入したり、用意した配列の中身を表示しました。
実際のアプリではユーザーのデータを呼び出して表示したり、お知らせ等のメッセージを一覧表示させたり様々な場面で使用する機会があると思います。
それに合わせてデザインを工夫したり機能を追加したりなど様々な応用が効きます。
基本をしっかり抑えて適切に活用できるようにしていきましょう！

次回はリストのデザインやタイトルの表示方法などを紹介しようと思います。