SwiftUIのListの基本的な使い方

今回はListの使い方を書いていきます。 UIKitのUITableViewのようなViewを作っていきます。
UITableViewCellにあたる部分はRowといいます。

Listでテキストや画像を表示してみる

List {
            Text("リスト")
            Text("2行目")
            Image("logo")
        }

リストの1行目と2行目にはテキストを表示させます。
加えて3行目にはAssetsに入れた"logo"という画像を表示させることにしました。

このように表示されます。
画像のサイズを変更していないので元のサイズのまま大きめに表示されています。
しかし自動的にRowの高さが変わることによって、きちんとリストとして表示されています。

一つのRowに画像もテキストも入れる

こんなRowを作りたいと思います。

List {
            HStack() {
                Image("logo")
                    .resizable()
                    .frame(width: 30, height: 30)
                Text("画像とテキストを表示")
            }
        }

HStack()を使ってRowの中で横並びに画像とテキストを表示できるようにします。
画像を適当なサイズにしてRowの高さを調節しましょう。

yotubarail.work

今回の場合画像はデフォルトの.scaleToFit()になっています。

セクションを作ってみる

UITableViewと同様にセクションを作って、項目を見やすくすることも可能です。
iPhoneの設定を思い浮かべてもらえれば、わかりやすいと思います。

List{
            Section(header: Text("セクション")){
                Text("簡単")
            }
        }

Section()で括ることでセクションがついたリストができます。
headerでセクションごとのヘッダーのテキストを変えます。

List{
            Section(header: Text("セクション")){
                Text("簡単")
            }
        } .listStyle(GroupedListStyle())

上記のようにliststyleを指定することで見た目を変えられます。
iPhoneの設定なんかで見るのはこちらのレイアウトですね。

配列の中身を順番にListに表示

letやvarを使った配列の中身を順番にリストに表示させます。

struct ListView: View {
let number = ["1", "2", "3", "4"]
    
    var body: some View {
        List {
            Section(header: Text("数字を表示")) {
                ForEach(0..<number.count) { index in
                    Text(self.number[index])
                }
            }
        }
    }
}

ForEach()を使って指定した範囲内で処理を繰り返すことで配列の中身を1つずつ表示させています。
今回はForEach(0..<number.count)とすることで最初の"1"から表示しましたが、0を1に変えたりすることで範囲を変えられます。
範囲を指定する以外にidを指定する方法もありますが、それはまた別の機会で触れたいと思います。

まとめ

今回のコードはこちらにまとめてあります。

github.com