定義數(shù)據(jù)結(jié)構(gòu)體：
struct Box {
var id: Int
let title, imageUrl: String
}
定義橫向滑動單元格：
import SwiftUI
struct BoxView: View {
let box: Box
var body: some View {
VStack {
Image("\(box.imageUrl)")
.resizable()
.cornerRadius(12)
.frame(width: 80, height: 80)
Text("\(box.title)")
.font(.subheadline)
.fontWeight(.bold)
}
}
}
#if DEBUG
struct BoxView_Previews: PreviewProvider {
static var previews: some View {
BoxView(box: Box(id: 4, title: "SwiftUI", imageUrl: "4"))
}
}
#endif
效果：
截屏2019-12-0716.42.59.png
定義展示頁面：
import SwiftUI
struct BoxContentView: View {
let boxes: [Box] = [
Box(id: 0, title: "Autumn", imageUrl: "0"),
Box(id: 1, title: "Natural", imageUrl: "1"),
Box(id: 2, title: "Jiuzhaigou", imageUrl: "2"),
Box(id: 3, title: "Mountain", imageUrl: "3"),
Box(id: 4, title: "Lake", imageUrl: "4"),
]
var body: some View {
NavigationView {
ScrollView(.horizontal, showsIndicators: false) {
HStack {
ForEach(boxes, id: \.id) { box in
BoxView(box: box)
}
}
Spacer()
}.padding(20)
.navigationBarTitle(Text("Beautiful Scenery!"))
}
}
}
#if DEBUG
struct BoxContentView_Previews: PreviewProvider {
static var previews: some View {
BoxContentView()
}
}
#endif
最終效果：
2019-12-07 16.36.15.gif
