【SwiftUI代码片断】一个简单的卡片堆叠效果

做一个像下图一样，让不同颜色的卡片堆叠在一起的效果，使用SwiftUI可以轻松实现。

1、单个色卡代码

    // 单个卡片 View
struct CardView: View {
    var restaurant: String
    var index: Int
    var isLast: Bool
    let color: [Color] = [.blue, .red, .yellow]
    var body: some View {
        ZStack{
            color[index % color.count].cornerRadius(10.0)//背景颜色 + 圆角
            Text("这是显示：" + restaurant)
                .padding(EdgeInsets(top: 20, leading: 20, bottom: isLast ? 20 : 30, trailing: 20))//填充
                .foregroundColor(.white)//文字颜色
        }.offset(y: index == 0 ? 0 : CGFloat(-10 * index))//位置偏移
    }
}

2、遍历需要显示的内容

//遍历卡片
struct CardStackView: View {
    let restaurants = ["网络人标题", "http://www.55mx.com", "写代码的一天天"]
    var body: some View {
        ScrollView {
           VStack(spacing: 0) { //不要有间隔
                ForEach(restaurants.indices) { index in
                    CardView(restaurant: restaurants[index], index: index, isLast: index == restaurants.count - 1)
                }
            }
        }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/192