この記事ではSwiftUIでリストビューを作る方法を紹介します。
定義 | init(@ViewBuilder content: () -> Content) |
引数 | content: リストに表示するビューをクロージャで指定する |
最も簡単な例は以下のとおりです。
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()
}
}
すると、リストにレビューオブジェクトが並んで表示されます。
コメントを残す