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
更多SwiftUI教程和代码关注专栏
- 请关注我的专栏 SwiftUI教程与源码
