[SwiftUI教程]3、建立列表和導航

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公眾號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/11075270.html 
➤如果鏈接不是山青詠芝的博客園地址，則可能是爬取作者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持作者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

設置基本地標詳細信息視圖后，您需要為用戶提供查看完整地標列表以及查看每個位置詳細信息的方法。

您將創建可顯示有關任何地標的信息的視圖，並動態生成滾動列表，用戶可以點按該列表以查看地標的詳細視圖。要微調UI，您將使用Xcode的畫布以不同的設備大小呈現多個預覽。

下載項目文件以開始構建此項目，並按照以下步驟操作。

預計的時間：35分

項目文件：https://docs-assets.developer.apple.com/published/ccd7eeefd0/BuildingListsAndNavigation.zip

Xcode 11 beta：https://developer.apple.com/download/

一、了解樣本數據

在[SwiftUI教程]2、創建和組合視圖中，您將信息硬編碼到所有自定義視圖中。在這里，您將學習將數據傳遞到自定義視圖中以供顯示。

首先下載入門項目並熟悉示例數據。

 

第1步

在Project導航器中，選擇Models > Landmark.swift.

Landmark.swift聲明一種Landmark結構，存儲應用程序需要顯示的所有地標信息，並從中導入一系列地標數據。landmarkData.json

import SwiftUI
import CoreLocation

struct Landmark: Hashable, Codable {
    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)
    }

    func image(forSize size: Int) -> Image {
        ImageStore.shared.image(name: imageName, size: size)
    }

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

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

第2步

在Project導航器中，選擇Resources> landmarkData.json.

您將在本教程的其余部分以及隨后的所有內容中使用此示例數據。

[
    {
        "name": "Turtle Rock",
        "category": "Featured",
        "city": "Twentynine Palms",
        "state": "California",
        "id": 1001,
        "park": "Joshua Tree National Park",
        "coordinates": {
            "longitude": -116.166868,
            "latitude": 34.011286
        },
        "imageName": "turtlerock"
    },
    {
        "name": "Silver Salmon Creek",
        "category": "Lakes",
        "city": "Port Alsworth",
        "state": "Alaska",
        "id": 1002,
        "park": "Lake Clark National Park and Preserve",
        "coordinates": {
            "longitude": -152.665167,
            "latitude": 59.980167
        },
        "imageName": "silversalmoncreek"
    },
    ...
]

第3步

請注意，現在可以命名創建和組合視圖中的類型。ContentViewLandmarkDetail

您將在此以及以下每個教程中創建多個視圖類型。

import SwiftUI

struct LandmarkDetail: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

struct LandmarkDetail_Preview: PreviewProvider {
    static var previews: some View {
        LandmarkDetail()
    }
}

二、創建行視圖

  您將在本教程中構建的第一個視圖是用於顯示每個地標的詳細信息的行。 此行視圖將信息存儲在其顯示的地標的屬性中，以便一個視圖可以顯示任何地標。 稍后，您將多個行組合成一個地標列表。

第1步

創建一個名為的新SwiftUI視圖。LandmarkRow.swift

第2步

如果預覽不可見，請通過選擇Editor > Editor and Canvas來顯示畫布，然后單擊“Get Started”

第3步

添加landmark為存儲屬性。LandmarkRow

添加landmark屬性時，預覽將停止工作，因為類型在初始化期間需要一個標記實例。LandmarkRow

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        Text("Hello World")
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow()
    }
}

要修復預覽，您需要修改預覽提供程序。

第4步

在previewsstatic屬性中，將landmark參數添加到初始值設定項，指定數組的第一個元素。LandmarkRow_PreviewsLandmarkRowlandmarkData

預覽顯示文本Hello World。修復后，您可以為行構建布局。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        Text("Hello World")
    }
}

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

第5步

將現有文本視圖嵌入到HStack。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            Text("Hello World")
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[0])

第6步

修改文本視圖以使用landmark屬性name。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            Text(landmark.name)
        }
    }
}

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

第7步

通過在文本視圖之前添加圖像來完成行。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 50)
            Text(landmark.name)
        }
    }
}

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

三、自定義行預覽 

Xcode的畫布自動識別並顯示當前編輯器中符合協議的任何類型。預覽提供程序返回一個或多個視圖，其中包含用於配置大小和設備的選項。PreviewProvider

您可以從預覽提供程序自定義返回的內容，以准確呈現對您最有幫助的預覽。

 

 第1步 

在將參數更新為數組中的第二個元素。LandmarkRow_PreviewslandmarklandmarkData

預覽立即更改以顯示第二個樣本地標而不是第一個。 

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 50)
            Text(landmark.name)
        }
    }
}

struct LandmarkRow_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkRow(landmark: landmarkData[1])
    }
}

第2步

使用修飾符設置近似列表中行的大小。previewLayout(_:) 

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 50)
            Text(landmark.name)
        }
    }
}

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

第3步

將返回的行換行Group，然后再將第一行添加回來。

Group是用於對視圖內容進行分組的容器。Xcode將組的子視圖渲染為畫布中的單獨預覽。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 50)
            Text(landmark.name)
        }
    }
}

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

第4步

要簡化代碼，請將調用移至組的子聲明外部。previewLayout(_:)

視圖的子項繼承視圖的上下文設置，例如預覽配置。

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

    var body: some View {
        HStack {
            landmark.image(forSize: 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))
    }
}

您在預覽提供程序中編寫的代碼僅更改Xcode在畫布中顯示的內容。由於該#if DEBUG指令，編譯器會刪除代碼，因此它不會隨您的應用程序一起提供。

四、創建地標列表

使用SwiftUI的 List 類型時，可以顯示特定於平台的視圖列表。列表的元素可以是靜態的，就像您目前創建的堆棧的子視圖一樣，或者是動態生成的。您甚至可以混合靜態和動態生成的視圖。

第1步

創建一個名為的新SwiftUI視圖。LandmarkList.swift

第2步

Text用a 替換默認視圖List，並提供帶有前兩個標記的實例作為列表的子標記。LandmarkRow

預覽顯示以適合iOS的列表樣式呈現的兩個地標。

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List {
            LandmarkRow(landmark: landmarkData[0])
            LandmarkRow(landmark: landmarkData[1])
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

五、使列表動態化

您可以直接從集合中生成行，而不是單獨指定列表的元素。

您可以通過傳遞數據集合以及為集合中的每個元素提供視圖的閉包來創建顯示集合元素的列表。該列表使用提供的閉包將集合中的每個元素轉換為子視圖。

第1步

刪除兩個靜態地標行，然后傳遞給初始化程序。landmarkDataList

列表使用可識別的數據。您可以通過以下兩種方式之一來識別數據：通過identified(by:)使用唯一標識每個元素的屬性的鍵路徑調用方法，或者使數據類型符合Identifiable協議。

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarkData.identified(by: \.id)) { landmark in

        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

第2步

通過從閉包返回a 來完成動態生成的列表。LandmarkRow

這為數組中的每個元素創建一個。LandmarkRowlandmarkData

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarkData.identified(by: \.id)) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

接下來，您將List通過添加Identifiable對Landmark類型的一致性來簡化代碼。

第3步

切換到並聲明符合協議。Landmark.swiftIdentifiable

由於該Landmark類型已經具有協議id所需的屬性Identifiable，因此沒有其他工作要做。

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

    func image(forSize size: Int) -> Image {
        ImageStore.shared.image(name: imageName, size: size)
    }

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

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

第4步

切換回並刪除呼叫。LandmarkList.swiftidentified(by:)

從現在開始，您將能夠Landmark直接使用元素集合。

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        List(landmarkData) { landmark in
            LandmarkRow(landmark: landmark)
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

六、在列表和詳細信息之間設置導航 

列表正確呈現，但您無法點擊單個地標以查看該地標的詳細信息頁面。

您可以通過將導航功能嵌入到列表中，然后將每行嵌套在一個列表中來設置轉換到目標視圖，從而將導航功能添加到列表中。NavigationViewNavigationButton

第1步

將動態生成的地標列表嵌入到。NavigationView

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                LandmarkRow(landmark: landmark)
            }
        }
    }
}

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

第2步

調用修改器方法以在顯示列表時設置導航欄的標題。navigationBarTitle(_:)

import SwiftUI

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

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

第3步

在列表的閉包內，將返回的行包裝在a中，將視圖指定為目標。NavigationButtonLandmarkDetail

import SwiftUI

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

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

第4步

您可以通過切換到實時模式直接在預覽中嘗試導航。單擊“實時預覽”按鈕，然后點擊地標以訪問詳細信息頁面。

七、將數據傳遞到子視圖

　　該視圖仍然使用硬編碼的細節，以顯示其標志性建築。就像它所包含的類型和視圖需要使用屬性作為其數據的源。LandmarkDetailLandmarkRowLandmarkDetaillandmark

從子視圖開始，您將轉換，然后顯示傳入的數據，而不是硬編碼每一行。CircleImageMapViewLandmarkDetail

第1步

在添加存儲的屬性。CircleImage.swiftimageCircleImage

這是使用SwiftUI構建視圖時的常見模式。您的自定義視圖通常會為特定視圖包裝和封裝一系列修改器。

 

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_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

第2步

更新預覽提供程序以傳遞Turtle Rock的圖像。

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_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage(image: Image("turtlerock"))
    }
}

第3步

在，添加屬性並轉換代碼以使用該屬性而不是硬編碼緯度和經度。MapView.swiftcoordinateMapView

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: 0.02, longitudeDelta: 0.02)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

第4步

更新預覽提供程序以傳遞數據數組中第一個地標的坐標。

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: 0.02, longitudeDelta: 0.02)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

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

第5步

在，向該類型添加屬性。LandmarkDetail.swiftLandmarkLandmarkDetail

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark

    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

struct LandmarkDetail_Preview: PreviewProvider {
    static var previews: some View {
        LandmarkDetail()
    }
}

第6步

更新預覽以使用第一個地標。landmarkData

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark

    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

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

第7步

將所需數據傳遞給您的自定義類型。

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark

    var body: some View {
        VStack {
            MapView(coordinate: landmark.locationCoordinate)
                .frame(height: 300)

            CircleImage(image: landmark.image(forSize: 250))
                .offset(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()
        }
    }
}

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

第8步

最后，在顯示詳細視圖時，調用修改器為導航欄指定標題。navigationBarTitle(_:displayMode:)

import SwiftUI

struct LandmarkDetail: View {
    var landmark: Landmark

    var body: some View {
        VStack {
            MapView(coordinate: landmark.locationCoordinate)
                .frame(height: 300)

            CircleImage(image: landmark.image(forSize: 250))
                .offset(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_Preview: PreviewProvider {
    static var previews: some View {
        LandmarkDetail(landmark: landmarkData[0])
    }
}

第9步

在，切換應用程序的根視圖。SceneDelegate.swiftLandmarkList

您的應用程序以在模擬器中獨立運行時定義的根視圖而不是預覽開始。SceneDelegate

import UIKit
import SwiftUI

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    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
        let window = UIWindow(frame: UIScreen.main.bounds)
        window.rootViewController = UIHostingController(rootView: LandmarkList())
        self.window = window
        window.makeKeyAndVisible()
    }

    // ...
}

第10步

在，將當前地標傳遞到目的地。LandmarkList.swiftLandmarkDetail

 

import SwiftUI

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

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
    }
}

第11步

從列表導航時，切換到實時預覽以查看詳細視圖顯示正確的標記。

 

八、動態生成預覽

接下來，您將向預覽提供程序添加代碼，以便以不同的設備大小呈現列表視圖的預覽。默認情況下，預覽會以活動方案中設備的大小進行渲染。您可以通過調用修改器方法來更改預覽設備。LandmarkList_PreviewspreviewDevice(_:)

 

第1步

首先，將當前列表預覽更改為以iPhone SE的大小呈現。

您可以提供Xcode方案菜單中顯示的任何設備的名稱。

import SwiftUI

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

struct LandmarkList_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkList()
            .previewDevice(PreviewDevice(rawValue: "iPhone XS"))
    }
}

第2步

在列表預覽中，使用設備名稱數組作為數據嵌入實例中。LandmarkListForEach

ForEach以與列表相同的方式對集合進行操作，這意味着您可以在任何可以使用子視圖的位置使用它，例如在堆棧，列表，組等中。當數據元素是簡單的值類型（如您在此處使用的字符串）時，您可以將其\.self用作標識符的關鍵路徑。

第3步

使用修改器將設備名稱添加為預覽的標簽。previewDisplayName(_:)

import SwiftUI

struct LandmarkList: View {
    var body: some View {
        NavigationView {
            List(landmarkData) { landmark in
                NavigationButton(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"].identified(by: \.self)) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
                .previewDisplayName(deviceName)
        }
    }
}

第4步

您可以嘗試使用不同的設備來比較視圖的渲染，所有這些都來自畫布。