问题描述
我想垂直制作一个卡片堆视图,它与相关卡片重叠。
我尝试使用我的示例代码,但没有奏效。偏移参数中遗漏了一些东西。请节省我的时间。
示例代码:
// A card stack view that shows the data for Restaurant
struct CardStackView: View {
// static data
let restaurants = [
Restaurant(name: "Joe's Original"),Restaurant(name: "The Real Joe's Original"),Restaurant(name: "Original Joe's")
]
var body: some View {
ScrollView {
Lazyvstack() {
ForEach(restaurants.indices) { index in
CardView(restaurant: restaurants[index],index: index)
}
}
}
}
}
// Data struct
struct Restaurant: Identifiable {
let id = UUID()
let name: String
}
// Card View
struct CardView: View {
var restaurant: Restaurant
var index: Int
let color: [Color] = [.blue,.red,.yellow]
var body: some View {
ZStack(){
color[index%3]
.cornerRadius(10.0)
.padding(.trailing)
.offset(y: 20.0)
Text("Come and eat at \(restaurant.name)")
.padding(EdgeInsets(top: 20,leading: 20,bottom: 30,trailing: 20))
.foregroundColor(.white)
}
}
}
解决方法
设置 ZStack 的偏移量
struct CardView: View {
var restaurant: Restaurant
var index: Int
let color: [Color] = [.blue,.red,.yellow]
var body: some View {
ZStack{
color[index%3]
.cornerRadius(10.0)
Text("Come and eat at \(restaurant.name)")
.padding(EdgeInsets(top: 20,leading: 20,bottom: 30,trailing: 20))
.foregroundColor(.white)
}.offset(y: index == 0 ? 0 : CGFloat(-25 * index))
}
}
如果您希望所有卡片的大小相同,请传递最后一个索引并设置填充。
这是演示。
struct CardStackView: View {
// static data
let restaurants = [
Restaurant(name: "Joe's Original"),Restaurant(name: "The Real Joe's Original"),Restaurant(name: "Original Joe's")
]
var body: some View {
ScrollView {
LazyVStack(spacing: 0) { //<=== Here
ForEach(restaurants.indices) { index in
CardView(restaurant: restaurants[index],index: index,isLast: index == restaurants.count - 1) //<=== Here
}
}
}
}
}
// Card View
struct CardView: View {
var restaurant: Restaurant
var index: Int
var isLast: Bool
let color: [Color] = [.blue,bottom: isLast ? 20 : 30,trailing: 20)) //<=== Here
.foregroundColor(.white)
}.offset(y: index == 0 ? 0 : CGFloat(-10 * index))
}
}