SwiftUI 小demo之List圖文混排趙孟頫書法APP（2020 tutorial）
實現(xiàn)的功能
- 自定義一個struct
- 使用@State 修飾器
- 使用ForEach循環(huán)顯示
- 使用Identifiable讓struct獲得唯一編號
- 自定義func 實現(xiàn)了界面的模塊化
- 自定義Color set 實現(xiàn)了一個土豪金 steam_gold
- 設(shè)置了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: "元代， 趙孟頫作 ，本幅設(shè)色，款“大德已亥子昂自寫小像”對幅宋濂書贊，鈐明項元汴印。"),
MingHua(name:"趙孟頫秋郊飲馬圖卷",img:"zmf_02.jpg",overview: "元代， 趙孟頫作,本幅右上方自書“秋郊飲馬圖”五字，左上方署款“皇慶元年十一月，子昂”。知此圖為趙孟頫59歲作。"),
MingHua(name:"趙孟頫水村圖卷",img:"zmf_03.jpg",overview: "元代， 趙孟頫作,本幅款識：“大德六年十一月望日，為錢德鈞作。子昂?！毕骡j“趙氏子昂”朱文印。本幅有清乾隆皇帝詩題兩段，乾隆、嘉慶內(nèi)府藏印及“楞伽真賞”等收藏印26方，半印8方。"),
MingHua(name:"趙孟頫心經(jīng)墨跡",img:"zmf_04.jpg",overview: "元代， 趙孟頫作,冊《般若波羅蜜多心經(jīng)》是趙孟頫的一件代表作品。它運筆自如，清潤流暢，自成面貌，但細分析起來，卻又感覺它筆筆字字都自有來歷。我們知道，宋代書畫藝術(shù)到南宋末年已走向衰退。馬遠、夏珪末流的畫風，大多空闊粗疏，韻味全無。"),
MingHua(name:"鵲華秋色圖卷",img:"zmf_05.jpg",overview: "元代， 趙孟頫作,此《鵲華秋色圖》卷由元代畫家趙孟頫繪。此畫是元貞元年他自濟南路職位南返后，為友人周密描繪其祖籍地貌景色之作。描繪的是濟南東北華不注山和鵲山一帶秋景，畫境清曠恬淡，表現(xiàn)出恬靜而悠閑的田園風味。作品采用平遠構(gòu)圖，再以多種色彩調(diào)合渲染，虛實相生，筆法瀟酒，富有節(jié)奏感。此卷現(xiàn)藏于臺北故宮博物院。")
]
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數(shù)據(jù)存儲之做個筆記App 新增與查詢(CoreData)
- SwiftUI進階之存儲用戶狀態(tài)實現(xiàn)登錄與登出
- SwiftUI 數(shù)據(jù)之List顯示Sqlite數(shù)據(jù)庫內(nèi)容（2020年教程）
TextField篇
- 《SwiftUI 一篇文章全面掌握TextField文本框 (教程和全部源碼)》
- 《SwiftUI實戰(zhàn)之TextField風格自定義與formatters》
- 《SwiftUI實戰(zhàn)之TextField如何給鍵盤增加個返回按鈕(隱藏鍵盤)》
- 《SwiftUI 當鍵盤出現(xiàn)時避免TextField被遮擋自動向上移動》
- 《SwiftUI實戰(zhàn)之TextField如何給鍵盤增加個返回按鈕(隱藏鍵盤)》
JSON文件篇
技術(shù)交流
QQ:3365059189
SwiftUI技術(shù)交流QQ群:518696470
