Small demo of SwiftUI List photo-text Chao, calligraphy APP (2020 tutorial)

Small demo of SwiftUI List photo-text Chao, calligraphy APP (2020 tutorial)

---

Realization of functions

• Customizing a struct
• Use @State decorator
• Use ForEach loop display
• Identifiable make use struct to get a unique number
• Custom func achieve a modular interface
• Custom Color set implements a luxury-gold steam_gold
• Set VStack left their interval VStack (alignment: .leading, spacing: 20)

---

Code

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)
                
                
            }
            
        }
    }
}

effect

Small demo of SwiftUI List photo-text Chao, calligraphy APP

---

More attention SwiftUI tutorials and code columns

• Please pay attention to my column SwiftUI tutorials and source code