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教程與源碼