SwiftUI基础——构建列表和导航

clownote

2020-06-24 (Updated: 2022-12-01)

Learn to Make Apps with SwiftUI

SwiftUI

Swift UI 基础

今天是 WWDC20 的第二天了，所以继续来学习 Apple 的 app 开发。😜

翻译自 SwiftUI 的官方教程：Learn to Make Apps with SwiftUI

这篇文章是 Apple 给的 SwiftUI 官方教程的一部分，我自己阅读学习的时候顺便翻译的。

构建列表和导航

原文链接：https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

在我们已经完成了基本的地标细节视图后，现在，我们需要提供给用户一种方式，来查看完整的地标列表，并可以查看每一个地标的细节。

我们将构建可以展示任意地标信息的视图，还有动态生成一个滚动列表，用户可以点击列表里的项目来查看对应地标的细节信息。为了微调用户界面，我们将使用 Xcode 的画布在不同的设备尺寸下渲染多个预览。

载项目文件，跟着下面的步骤开始构建工程吧：

预计时间：35分钟

项目文件：https://docs-assets.developer.apple.com/published/f021500afcdf6c3930549f1ffeb65e7e/110/BuildingListsAndNavigation.zip

§ 1 认识样本数据(Sample Data)

原文链接：https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation#Get-to-Know-the-Sample-Data

在之前的教程中，我们把信息用硬编码(hard-coded)写死到了我们的自定义视图中。现在，我们将要学习如何让视图显示我们传进去的指定信息。

首先，下载打开起步项目文件，然后自己熟悉一下样本数据吧。

一张图显示了如何从JSON数据中提取各种地标的细节

Step 1. 在项目导航（Project navigator）中选择 Models > Landmark.swift。

Landmark.swift declares a Landmarkstructure that stores all of the landmark information the app needs to display, and imports an array of landmark data from landmarkData.json.

Landmark.swift 声明了一个 Landmark 结构体，用来储存我们的 app 需要显示的所有地标信息（这些信息是从 landmarkData.json 读取出来的）。

// Landmark.swift

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

    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
}

Step 2. 在项目导航中，选择 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"
    },
    ...
]

在接下来的步骤中，我们都将使用这个样本数据文件。

Step 3. 注意，在创建并组合视图里我们写的 ContentView 现在重命名成了 LandmarkDetail。

在接下来的教程中，我们还有构建更多的其他视图。

// LandmarkDetail.swift

import SwiftUI

struct LandmarkDetail: View {
    var body: some View {
        VStack {
            MapView()
                .edgesIgnoringSafeArea(.top)
                .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_Previews: PreviewProvider {
    static var previews: some View {
        LandmarkDetail()
    }
}

预览效果是这样的：

Xcode预览的截图，地图视图对准了显示器的顶部

§ 2 创建行视图(Row View)

在本教程中，我们将构建的第一个视图是一个用于显示每个地标详细信息的行。这个行视图将它所显示的地标的信息存储在一个属性中，因此一个这种视图是可以显示任何地标的。之后，我们将把多个这种行组合成一个地标列表。

一张图描述了你将为本教程构建的行是如何构建的。该行由左边的图像、从JSON文件中提取数据以了解地标细节的文本视图和右边的间隔符组成。

Step 1. 创建一个新的 SwiftUI View，文件命名为 LandmarkRow.swift。

Xcode的截图，显示文件创建对话框。

Step 2. 如果预览没有显示，则通过 Editor > Canvas 打开画布，然后点 Resume。

一张图片显示了Xcode中欢迎来到SwiftUI屏幕

Step 3. 给 LandmarkRow 添加一个 landmark 储存属性。

// LandmarkRow.swift

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 属性时，预览会停止工作，因为LandmarkRow类型在初始化时需要一个 Landmark 实例。

为了修复预览，我们要修改一下预览提供器（PreviewProvider）。

Step 4. 在 LandmarkRow_Previews 的 previews 静态属性中，给 LandmarkRow 的初始化器中添加 landmark 参数，指定 landmarkData 数组的第一个元素。

现在，预览就可以工作了，显示出了文本 “Hello World”。

代码和预览截图，预览显示出了Hello World

修复了这个问题之后，就可以开始构建行的视图了。

Step 5. 把现有的文本视图嵌入到一个 HStack 里。

代码和预览截图，代码把现有的文本视图嵌入到一个 HStack 里，预览不变

Step 6. 把文本视图的内容改成 landmark 属性的 name。

代码和预览截图，文本视图的内容改成了landmark属性的name，预览显示文本Turtle Rock

Step 7. 通过在文本视图前添加图像，在文本视图后添加间隔符来完成行。

代码和预览截图，在文本视图前添加图像，在文本视图后添加间隔

这一节里我们完成的主要代码是LandmarkRow.swift：

import SwiftUI

struct LandmarkRow: View {
    var landmark: Landmark

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

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