SwiftUI 小demo之List图文混排赵孟頫书法APP（2020 tutorial）

SwiftUI 小demo之List图文混排赵孟頫书法APP（2020 tutorial）

---

实现的功能

• 自定义一个struct
• 使用@State 修饰器
• 使用ForEach循环显示
• 使用Identifiable让struct获得唯一编号
• 自定义func 实现了界面的模块化
• 自定义Color set 实现了一个土豪金 steam_gold
• 设置了VStack的左对其间隔 VStack(alignment: .leading, spacing: 20)

---

代码

import SwiftUI
struct MingHua:Identifiable{
    let id = UUID()
    let name: String
    let img:String
    let overview: String
}
struct ListImageView: View {
    @State var mingHuas:[MingHua] = [
        MingHua(name:"赵孟頫字画像",img:"zmf_01.jpg",overview: "元代， 赵孟頫作 ，本幅设色，款“大德已亥子昂自写小像”对幅宋濂书赞，钤明项元汴印。"),
        MingHua(name:"赵孟頫秋郊饮马图卷",img:"zmf_02.jpg",overview: "元代， 赵孟頫作,本幅右上方自书“秋郊飲馬圖”五字，左上方署款“皇慶元年十一月，子昂”。知此图为赵孟頫59岁作。"),
        MingHua(name:"赵孟頫水村图卷",img:"zmf_03.jpg",overview: "元代， 赵孟頫作,本幅款识：“大德六年十一月望日，为钱德钧作。子昂。”下钤“赵氏子昂”朱文印。本幅有清乾隆皇帝诗题两段，乾隆、嘉庆内府藏印及“楞伽真赏”等收藏印26方，半印8方。"),
        MingHua(name:"赵孟頫心经墨迹",img:"zmf_04.jpg",overview: "元代， 赵孟頫作,册《般若波罗蜜多心经》是赵孟頫的一件代表作品。它运笔自如，清润流畅，自成面貌，但细分析起来，却又感觉它笔笔字字都自有来历。我们知道，宋代书画艺术到南宋末年已走向衰退。马远、夏珪末流的画风，大多空阔粗疏，韵味全无。"),
        MingHua(name:"鹊华秋色图卷",img:"zmf_05.jpg",overview: "元代， 赵孟頫作,此《鹊华秋色图》卷由元代画家赵孟頫绘。此画是元贞元年他自济南路职位南返后，为友人周密描绘其祖籍地貌景色之作。描绘的是济南东北华不注山和鹊山一带秋景，画境清旷恬淡，表现出恬静而悠闲的田园风味。作品采用平远构图，再以多种色彩调合渲染，虚实相生，笔法潇酒，富有节奏感。此卷现藏于台北故宫博物院。")
    ]
    var body: some View {
        List{
            ForEach(self.mingHuas){mingHua in
                self.makeRow(mingHua: mingHua)
            }
           
        }
    }
    func makeRow(mingHua:MingHua) -> some View{
        HStack{
            Image(uiImage: UIImage(imageLiteralResourceName: mingHua.img))
                .resizable()
                .aspectRatio(1, contentMode: .fit)
                .frame(height: 120)
                .cornerRadius(20)
                .shadow(radius: 10)
            VStack(alignment: .leading, spacing: 20){
                Text(mingHua.name)
                    .foregroundColor(.steam_gold)
                    .bold()
                    .font(.system(size: 20))
                .padding(EdgeInsets(top: 16, leading: 10, bottom: 0, trailing: 5))
                Text(mingHua.overview)
                    .font(.system(size: 16))
                    .foregroundColor(.gray)
                
                
            }
            
        }
    }
}

效果

SwiftUI 小demo之List图文混排赵孟頫书法APP

---

推荐文章

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