SwiftUI 中的垂直卡片堆栈视图

Question

我想制作一个垂直的卡片堆视图，并且它与关联的卡片重叠。

喜欢:

我尝试使用我的示例代码，但没有成功。 offset 参数中遗漏了一些东西。请节省我的时间。

示例代码:

// 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)
        }
    }
}

Answer 1

将偏移设置为 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, .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: isLast ? 20 : 30, trailing: 20)) //<=== Here
                .foregroundColor(.white)
        }.offset(y: index == 0 ? 0 : CGFloat(-10 * index))
    }
}

SwiftUI 中的垂直卡片堆栈视图

Vertical card stack view in SwiftUI

stackview

swift

cardview

swiftui

swiftui-list