SwiftUI界面赏鉴demo之《潇湘卧游图》List & Navigation

SwiftUI 和 Flutter时代编程将成为一个有品位的工作，为此特开辟新板块，用于显示SwiftUI制作的界面demo，供大家赏鉴。

功能

• List
• Navigation
• 界面切换
• 自定义Cell

效果

[email protected]

[email protected]

代码

1. 主界面

import SwiftUI

struct ContentView: View {
    
    let hikes = Hike.all()
    
    var body: some View {
        
        NavigationView {
        
            List(self.hikes, id: \.name) { hike in
                NavigationLink(destination: HikeDetail(hike: hike)) {
                HikeCell(hike: hike)
                }
            }
            
            .navigationBarTitle("品味")
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct HikeCell: View {
    
    let hike: Hike
    
    var body: some View {
        HStack {
            Image(hike.imageURL)
                .resizable()
                .frame(width: 100, height: 100)
                .cornerRadius(16)
            
            VStack(alignment: .leading) {
                Text("《\(hike.name)》")
                    .font(.title)
                Text(hike.author)
                    .font(.headline)
                Text(hike.dynasty)
                    .font(.footnote)
                Text(hike.guancang)
                    .font(.caption)
            }
        }
    }
}

2. 详细页

import SwiftUI

struct HikeDetail: View {
    
    let hike: Hike
    @State private var zoomed: Bool = false
    
    var body: some View {
        
        VStack {
            Image(hike.imageURL)
                .resizable()
                .aspectRatio(contentMode: self.zoomed ? .fill : .fit)
                .onTapGesture {
                    withAnimation {
                        self.zoomed.toggle()
                    }
            }.padding()
            
            Text("《\(hike.name)》")
                .font(.title)
            Text(hike.author)
                .font(.headline)
            Text(hike.dynasty)
                .font(.subheadline)
            Text(hike.guancang)
                .font(.body)
            Text(hike.intro)
                .font(.footnote)
            .padding()
            
            
            
        }.navigationBarTitle(Text(hike.name), displayMode: .inline)
        
        
    }
}

struct HikeDetail_Previews: PreviewProvider {
    static var previews: some View {
        HikeDetail(hike:  Hike(name: "潇湘卧游图",
                               imageURL: "潇湘卧游图",
                               author:"李公麟",
                               dynasty: "北宋",
                               guancang: "东京国立博物馆" ,
                               intro: "此《潇湘卧游图》卷为现存中国宋代水墨山水画中最为优秀的作品之一，全卷以淡墨为主调。过去曾传为北宋文人画家李公麟的作品，藏于清宫深受重视。不过近年研究得知为与李公麟同乡的李姓画家所作。本作是为了禅僧云谷禅师而绘制，云谷禅师遍游各地却遗憾未能造访潇湘。此卷现藏于东京国立博物馆。",
                               miles: 6))
    }
}

更多SwiftUI教程和代码关注专栏

• 请关注我的专栏icloudend, SwiftUI教程与源码
  https://www.jianshu.com/c/7b3e3b671970