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卡片效果

推荐文章

CoreData篇

• SwiftUI数据存储之做个笔记App 新增与查询(CoreData)
• SwiftUI进阶之存储用户状态实现登录与登出
• SwiftUI 数据之List显示Sqlite数据库内容（2020年教程）

TextField篇

• 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源码)》
• 《SwiftUI实战之TextField风格自定义与formatters》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》
• 《SwiftUI 当键盘出现时避免TextField被遮挡自动向上移动》
• 《SwiftUI实战之TextField如何给键盘增加个返回按钮(隐藏键盘)》

JSON文件篇

• SwiftUI JSON文件下载、存储、解析和展示(代码大全)

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

请关注我的专栏icloudend,

• 《SwiftUI教程与源码》
• 《SwiftUI vs 数据存储》

https://www.jianshu.com/c/7b3e3b671970