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