SwiftUI 高级List 之CardView卡片效果(2020年教程)

代码

import SwiftUI

struct ListCardView: View {
    var body: some View {
        List{
            VStack{
                Image("circle")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                HStack{
                    VStack(alignment: .leading) {
                        Text("明代")
                            .font(.headline)
                            .foregroundColor(.secondary)
                        Text("销闲清课图")
                            .font(.title)
                            .fontWeight(.black)
                            .foregroundColor(.primary)
                            .lineLimit(3)
                        Text("此《销闲清课图》卷由明代孙克弘绘制。")
                            .foregroundColor(.secondary)
                    }
                    .layoutPriority(100)
                    //将VStack 推到左侧
                    Spacer()
                }
                .padding()
            }
            .cornerRadius(20)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
            )
                .padding([.top, .horizontal])
            
            //second
            VStack{
                Image("wangguo")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                HStack{
                    VStack(alignment: .leading) {
                        Text("清朝")
                            .font(.headline)
                            .foregroundColor(.secondary)
                        Text("万国来朝图")
                            .font(.title)
                            .fontWeight(.black)
                            .foregroundColor(.primary)
                            .lineLimit(3)
                        Text("这幅《万国来朝图轴》也是北京故宫博物院藏。此卷应为清乾隆朝早期的一幅以万国来朝（万寿：崇庆皇太后七十大寿）为题材的作品。卷右上有清乾隆二十六年乾隆帝御题。")
                            .foregroundColor(.secondary)
                    }
                    .layoutPriority(100)
                    //将VStack 推到左侧
                    Spacer()
                }
                .padding()
            }
            .cornerRadius(20)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
            )
                .padding([.top, .horizontal])
        }
    }
    
}

效果

SwiftUI 高级List 之CardView卡片效果

---

更多SwiftUI教程和代码关注专栏

• 请关注我的专栏 SwiftUI教程与源码