系統: Mac OS 10.15.1， XCode 11.2.1，swift 5.0
寫作時間：2019-11-30

1. 說明

此例子包含元素：List視圖(代替以前的TableView), 導航。這個例子接著上一個例子SwiftUI實戰二：組合視圖和地圖視圖，把它當作詳情頁。
細節請查看官網教程

2. 元素以及代碼下載

https://github.com/zgpeace/BuildingListsAndNavigation

初始項目請用以下目錄StartingPoint > Landmarks

3. 數據模型

Landmark.swift定義了struct結構體數據的字段，
landmarkData.json存儲了列表數據
Data.swift 實現加載文件landmarkData.json里的數據，并構建為Landmark.swift模型數組let landmarkData: [Landmark] = load("landmarkData.json")

LandmarkDetail.swift的內容就是上一節ContentView.swift里面的內容.

Landmark.swift需要實現協議Identifiable，否則在List調用會報錯。

Lists work with identifiable data. You can make your data identifiable in one of two ways: by passing along with your data a key path to a property that uniquely identifies each element, or by making your data type conform to the Identifiable protocol.

import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable, Identifiable {
    var id: Int
    var name: String
    fileprivate var imageName: String
    fileprivate var coordinates: Coordinates
    var state: String
    var park: String
    var category: Category

    var locationCoordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(
            latitude: coordinates.latitude,
            longitude: coordinates.longitude)
    }

    enum Category: String, CaseIterable, Codable, Hashable {
        case featured = "Featured"
        case lakes = "Lakes"
        case rivers = "Rivers"
    }
}

extension Landmark {
    var image: Image {
        ImageStore.shared.image(name: imageName)
    }
}

struct Coordinates: Hashable, Codable {
    var latitude: Double
    var longitude: Double
}

4. 創建Cell行視圖

實現結果圖如下：

創建SwiftUI view, 命名為 LandmarkRow.swift.

//
//  LandmarkRow.swift
//  Landmarks
//
//  Created by zgpeace on 2019/11/30.
//  Copyright  2019 Apple. All rights reserved.
//

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark
    
    var body: some View {
        HStack() {
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
            Text(landmark.name)
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LandmarkRow(landmark: landmarkData[0])
            LandmarkRow(landmark: landmarkData[1])
        }
        .previewLayout(.fixed(width: 300, height: 70))
    }
}

代碼解析：

1. 預覽分組： Group可以同時預覽多個視圖
2. previewLayout: 可以設置大小

預覽效果：

5. 創建List視圖

新建SwiftUI view, 命名為 LandmarkList.swift.

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
                    LandmarkRow(landmark: landmark)
                }
            }
        .navigationBarTitle(Text("Landmarks"))
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE", "iPhone XS Max"], id: \.self) { deviceName in
            LandmarkList()
            .previewDevice(PreviewDevice(rawValue: deviceName))
        }
    }
}

代碼解析：

1. NavigationView： 添加導航欄
2. .navigationBarTitle(Text("Landmarks"))：導航欄設置title
3. NavigationLink(destination: LandmarkDetail(landmark: landmark))：點擊子項跳轉到詳情頁

預覽效果如下：

6. 圓形圖片頁數據改為動態獲取

import SwiftUI

struct CircleImage: View {
    var image: Image
    
    var body: some View {
        image.clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 10)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage(image: landmarkData[0].image)
    }
}

預覽效果：

7. 地圖頁面數據改為動態獲取

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var coordinate: CLLocationCoordinate2D
    
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }

    func updateUIView(_ view: MKMapView, context: Context) {
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView(coordinate: landmarkData[0].locationCoordinate)
    }
}

需要Live Preview才能看到地圖：

8. 詳情頁數據改為動態獲取

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark
    
    var body: some View {
        VStack {
            MapView(coordinate: landmark.locationCoordinate)
                .edgesIgnoringSafeArea(.top)
                .frame(height: 300)

            CircleImage(image: landmark.image)
                .offset(x: 0, y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text(landmark.name)
                    .font(.title)
                HStack(alignment: .top) {
                    Text(landmark.park)
                        .font(.subheadline)
                    Spacer()
                    Text(landmark.state)
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
        .navigationBarTitle(Text(landmark.name), displayMode: .inline)
    }
}

struct LandmarkDetail_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkDetail(landmark: landmarkData[0])
    }
}

預覽效果：

9. SceneDelegate初始頁面更新

變動的函數如下：

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
    // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
    // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

    // Use a UIHostingController as window root view controller
    if let windowScene = scene as? UIWindowScene {
        let window = UIWindow(windowScene: windowScene)
        window.rootViewController = UIHostingController(rootView: LandmarkList())
        self.window = window
        window.makeKeyAndVisible()
    }
}

10. 還可以設置device為iPad預覽

參考

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

https://developer.apple.com/tutorials/swiftui/tutorials