[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( 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( 300, height: 70))
            LandmarkRow(landmark: landmarkData[1])
                .previewLayout(.fixed( 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( 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步

您可以尝试使用不同的设备来比较视图的渲染，所有这些都来自画布。