SwiftUIでリストビューを作成する

この記事ではSwiftUIでリストビューを作る方法を紹介します。

最も簡単な例は以下のとおりです。

import SwiftUI

struct ListView: View {
    var body: some View {
        List {
            Text("コロナ")
            Text("自粛")
            Text("早く終われ")
        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

表示は以下のとおり。
↓

リストをカスタマイズしてみましょう。

以下のような書籍のレビュー画面を作ります。

上のレビュー画面を作るためのソースコードはこちらです。
（ReviewView.swiftというSwiftUI Viewファイルを作成しています）

import SwiftUI

struct ReviewView: View {
    var title: String
    var review: String
    var rating: Int = 1
    var image: String
    
    var body: some View {
        VStack {
            Text(title).font(.largeTitle)
            Image(image)
                .resizable()
                .frame(width: 100, height: 100, alignment: .center)
            HStack(spacing: 0) {
                ForEach(1..<rating, id: \.self) {_ in
                    Image(systemName:"star.fill")
                }
                
                ForEach(rating..<5) {_ in
                    Image(systemName:"star")
                }
                
            }.foregroundColor(Color.yellow)
            Text(review).font(.subheadline)
        }
    }
}

struct ReviewView_Previews: PreviewProvider {
    static var previews: some View {
        ReviewView(
            title: "SwiftUI 徹底入門",
            review: "素晴らしい本です",
            rating: 4,
            image: "swiftui"
        )
            .previewLayout(.fixed(width: 400, height: 300))
    }
}

上のレビューを一つのパーツとして、リストに組み込んでみましょう。
ContentView.swiftを以下のように編集します。

import SwiftUI

struct Review {
    var title: String
    var review: String
    var rating: Int
    var image: String
}

struct ContentView: View {
    var body: some View {
        let reviews = [
            Review(
                title: "SwiftUI 徹底入門",
                review: "素晴らしい本です",
                rating: 5,
                image: "swiftui"
            ),
            Review(
                title: "SwiftUI Essentials",
                review: "なかなかの本です",
                rating: 4,
                image: "swiftui_essentials"
            ),
            Review(
                title: "SwiftUI 徹底入門",
                review: "私も良い本だと思います",
                rating: 3,
                image: "swiftui"
            )
        ]
        
        return List {
            ForEach(0...2, id: \.self) {
                ReviewView(
                    title: reviews[$0].title,
                    review: reviews[$0].review,
                    rating: reviews[$0].rating,
                    image: reviews[$0].image
                )
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

すると、リストにレビューオブジェクトが並んで表示されます。