投稿
  1. 首页
  2. java

【SwiftUI基础入门】②、建筑列表和导航、创建地标模型、创建行视图、自定义行预览、创建地标列表、使列表动态化、在列表和详细信息之间设置导航、将数据传递到子视图、动态生成预览

code • 2022-5-13 • java • 阅读 54

【SwiftUI基础入门】②、建筑列表和导航、创建地标模型、创建行视图、自定义行预览、创建地标列表、使列表动态化、在列表和详细信息之间设置导航、将数据传递到子视图、动态生成预览,第1张

SwiftUI基础入门
一共分为10个系列
①(创建和组合视图篇) 共6个内容 已更新
②(建筑列表和导航篇) 共8个内容 已更新

建筑列表和导航
      • SwiftUI 是一种为任何 Apple 平台声明用户界面的现代方式。比以往更快地创建美观、动态的应用程序。
      • ①、SwiftUI基础
      • 1、[建筑列表和导航](https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation)`预计35分钟`
      • 1.1、创建地标模型
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 第 5 步
      • 第 6 步
      • 第 7 步
      • 第 8 步
      • 第 9 步
      • 第 10 步
      • 第 11 步
      • 1.2、创建行视图
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 第 5 步
      • 第 6 步
      • 第 7 步
      • 1.3、自定义行预览
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 第 5 步
      • 第 6 步
      • 第 7 步
      • 第 8 步
      • 第 9 步
      • 1.4、创建地标列表
      • 第 1 步
      • 第 2 步
      • 1.5、使列表动态化
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 1.6、在列表和详细信息之间设置导航
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 第 5 步
      • 第 6 步
      • 第 7 步
      • 1.7、将数据传递到子视图
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步
      • 第 5 步
      • 第 6 步
      • 第 7 步
      • 第 8 步
      • 第 9 步
      • 第 10 步
      • 第 11 步
      • 1.8、动态生成预览
      • 第 1 步
      • 第 2 步
      • 第 3 步
      • 第 4 步

SwiftUI 是一种为任何 Apple 平台声明用户界面的现代方式。比以往更快地创建美观、动态的应用程序。

学习完成预计时间 : 4小时25分钟.

SwiftUI参考文档

①、SwiftUI基础 1、建筑列表和导航预计35分钟 
SwiftUI 基础
建筑列表和导航
设置了基本的地标详细视图后，您需要为用户提供一种查看地标完整列表以及查看每个位置的详细信息的方法。

您将创建可以显示有关任何地标的信息的视图，并动态生成一个滚动列表，用户可以点击该列表来查看地标的详细视图。要微调 UI，您将使用 Xcode 的画布以不同的设备尺寸呈现多个预览。

下载项目文件以开始构建此项目，然后按照以下步骤 *** 作。
1.1、创建地标模型

在第一个教程中，您将信息硬编码到所有自定义视图中。在这里，您将创建一个模型来存储可以传递到视图中的数据。

使用上一教程中已完成的项目和本教程的项目文件中可用的资源开始。

第 1 步

将下载文件的 Resources 文件夹拖到项目的导航窗格中；在出现的对话框中，选择“Copy items if needed”和Landmarks目标，然后单击Finish。landmarkData.json

您将在本教程的其余部分以及随后的所有内容中使用此示例数据。

第 2 步

选择 File > New > File 在您的项目中创建一个新的 Swift 文件，并将其命名为.Landmark.swift

第 3 步

定义一个结构，其具有与数据文件Landmark中某些键的名称匹配的一些属性。landmarkData.json

添加Codable一致性可以更轻松地在结构和数据文件之间移动数据。您将在本节稍后部分依赖协议Decodable组件Codable从文件中读取数据。

第 4 步

将 JPG 文件从项目文件的 Resources 文件夹拖到项目的资产目录中。Xcode 为每个图像创建一个新的图像集。

新图像加入了您在上一教程中添加的 Turtle Rock 图像。

第 5 步

添加一个从数据中读取图像名称的属性，以及一个从资产目录加载图像的计算属性。imageNameimage

您将属性设为私有，因为Landmarks结构的用户只关心图像本身。

第 6 步

使用反映 JSON 数据结构中存储coordinates的嵌套类型向结构添加属性。Coordinates

您将此属性标记为私有，因为您将仅在下一步中使用它来创建公共计算属性。

第 7 步

计算一个对与 MapKit 框架交互有用的属性。locationCoordinate

在您的项目中创建一个新的 Swift 文件并将其命名为.ModelData.swift

第 8 步

在您的项目中创建一个新的 Swift 文件并将其命名为.ModelData.swift

第 9 步

创建一个load(_:)从应用程序的主包中获取具有给定名称的 JSON 数据的方法。

load 方法依赖于返回类型对Decodable协议的一致性，这是协议的一个组成部分

func load<T: Decodable>(_ filename: String) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
    else {
        fatalError("Couldn't find \(filename) in main bundle.")
    }

    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }

    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

第 10 步

创建一个从 初始化的地标数组。landmarkData.json

var landmarks: [Landmark] = load("landmarkData.json")

第 11 步

将、和放入 Views 组、Resources 组和Model组。ContentView.swiftCircleImage.swiftMapView.swiftlandmarkData.jsonLandmark.swiftModelData.swift

提示

您可以通过选择要添加到组的项目来创建现有项目的组，然后在 Xcode 菜单中选择 File > New > Group from Selection。

1.2、创建行视图

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

第 1 步

在名为 的 Views 组中创建一个新的 SwiftUI 视图。LandmarkRow.swift

第 2 步

如果预览不可见，请通过选择 Editor > Canvas 显示画布，然后单击 Resume。

第 3 步

添加landmark为 的存储属性。LandmarkRow

添加landmark属性时，预览停止工作，因为该类型在初始化期间需要一个地标实例。LandmarkRow

第 4 步

在 的previews静态属性中，将 landmark 参数添加到初始化程序，指定数组的第一个元素。LandmarkRow_PreviewsLandmarkRowlandmarks

预览显示文本“Hello, World!”。

第 5 步

将现有文本视图嵌入到HStack.

第 6 步

修改文本视图以使用该landmark属性的name.

第 7 步

通过在文本视图之前添加一个图像并在其后添加一个分隔符来完成该行。

1.3、自定义行预览

Xcode 的画布会自动识别并显示当前编辑器中符合协议的任何类型。预览提供程序返回一个或多个视图，并带有配置大小和设备的选项。PreviewProvider

您可以自定义从预览提供程序返回的内容，以准确呈现对您最有帮助的预览。

第 1 步

在中，将参数更新为数组中的第二个元素。LandmarkRow_Previewslandmarklandmarks

预览立即更改为显示第二个示例地标而不是第一个。

第 2 步

使用修饰符设置与列表中的行近似的大小。previewLayout(_😃

第 3 步

将返回的行包裹在 aGroup中，然后再次添加第一行。

Group是用于对视图内容进行分组的容器。Xcode 将组的子视图呈现为画布中的单独预览。

第 4 步

为了简化代码，将调用移到组的子声明之外。previewLayout(_😃

视图的子项继承视图的上下文设置，例如预览配置。

第 5 步

编辑VStack初始化程序以使视图按其前沿对齐。

默认情况下，堆栈将其内容沿其轴居中并提供适合上下文的间距。

第 6 步

在画布中，按住 Command 单击“约书亚树国家公园”，然后选择“嵌入 HStack”。

第 7 步

在位置之后添加一个新的文本视图，将占位符文本更改为公园的状态，然后将其字体设置为subheadline。

第 8 步

Spacer要引导布局使用设备的整个宽度，请通过向包含两个文本视图的水平堆栈添加 a 来分隔公园和状态。

spacer扩展以使其包含视图使用其父视图的所有空间，而不是仅由其内容定义其大小。

第 9 步

最后，使用padding()修饰符方法给地标的名称和细节多一点空间。

1.4、创建地标列表

当您使用 SwiftUI 的List类型时，您可以显示特定于平台的视图列表。列表的元素可以是静态的，例如您目前创建的堆栈的子视图，也可以是动态生成的。您甚至可以混合使用静态和动态生成的视图。

第 1 步

在名为 的 Views 组中创建一个新的 SwiftUI 视图。LandmarkList.swift

第 2 步

用 a替换默认Text视图List，并提供具有前两个地标的实例作为列表的子项。LandmarkRow

预览显示以适合 iOS 的列表样式呈现的两个地标。

1.5、使列表动态化

您可以直接从集合中生成行，而不是单独指定列表的元素。

您可以通过传递数据集合和为集合中的每个元素提供视图的闭包来创建显示集合元素的列表。该列表使用提供的闭包将集合中的每个元素转换为子视图。

第 1 步

删除两个静态地标行，并将模型数据的landmarks数组传递给List初始化程序。

列表适用于可识别的数据。您可以通过以下两种方式之一使您的数据可识别：与您的数据一起传递一个指向唯一标识每个元素的属性的关键路径，或者使您的数据类型符合Identifiable协议。

第 2 步

通过从闭包返回 a 来完成动态生成的列表。LandmarkRow

这将为数组中的每个元素创建一个。LandmarkRowlandmarks

第 3 步

接下来，您将通过添加与类型的一致性来简化List代码。IdentifiableLandmark

切换到并声明符合协议。Landmark.swiftIdentifiable

Landmark数据已经具备协议要求的id属性Identifiable；您只需要在读取数据时添加一个属性即可对其进行解码。

第 4 步

切换回并删除该参数。LandmarkList.swift

从现在开始，您将能够Landmark直接使用元素集合。

1.6、在列表和详细信息之间设置导航

该列表正确呈现，但您无法点击单个地标来查看该地标的详细信息页面。

您可以通过将导航功能嵌入到列表中来将导航功能添加到 a 中，然后将每一行嵌套在 a中以设置到目标视图的转换。NavigationViewNavigationLink

第 1 步

创建一个名为.LandmarkDetail.swift

第 2 步

将ContentView的body属性的内容从复制到.LandmarkDetail

第 3 步

ContentView的body改成LandmarkList

第 4 步

将动态生成的地标列表嵌入到.NavigationView

第 5 步

显示列表时调用修饰符方法设置导航栏的标题。navigationTitle(_😃

第 6 步

在列表的闭包中，将返回的行包装在 a 中，将视图指定为目标。NavigationLinkLandmarkDetail

第 7 步

您可以通过切换到实时模式直接在预览中试用导航。单击实时预览按钮并点击一个地标以访问详细信息页面。


1.7、将数据传递到子视图

该视图仍然使用硬编码的细节来显示其地标。就像它所包含的类型和视图一样，需要使用属性作为其数据的来源。LandmarkDetailLandmarkRowLandmarkDetaillandmark

从子视图开始，您将转换, , 然后显示传入的数据，而不是对每一行进行硬编码。CircleImageMapViewLandmarkDetail

第 1 步

在中，将存储的属性添加到。CircleImage.swiftimageCircleImage

这是使用 SwiftUI 构建视图时的常见模式。您的自定义视图通常会包装和封装特定视图的一系列修饰符。

第 2 步

更新预览提供程序以传递 Turtle Rock 的图像。

即使您已修复预览逻辑，预览也无法更新，因为构建失败。实例化圆形图像的详细视图也需要一个输入参数。

第 3 步

在中，添加属性并更新预览提供程序以传递固定坐标。MapView.swiftcoordinateMapView

此更改也会影响构建，因为详细视图具有需要新参数的地图视图。您将很快修复详细视图。

第 4 步

添加一个基于坐标值更新区域的方法。

第 5 步

向地图添加视图修改器，以触发基于当前坐标的区域计算。onAppear

第 6 步

在LandmarkDetail中，为类型添加一个属性。LandmarkDetail.swift

第 7 步

在LandmarkList，将当前地标传递到目的地 LandmarkDetail。

第 8 步

在LandmarkDetail文件中，将所需的数据传递给您的自定义类型。

第 9 步

将容器从 a 更改为VStacka，以便用户可以滚动浏览描述性内容，并删除不再需要的 。ScrollViewSpacer

第 10 步

最后，在显示详细视图时调用修饰符给导航栏一个标题，并调用修饰符使标题显示为内联。navigationTitle(:)navigationBarTitleDisplayMode(😃

只有当视图是导航堆栈的一部分时，导航更改才会生效。

第 11 步

当您从列表中导航时，切换到实时预览以查看详细视图显示正确的地标。


1.8、动态生成预览

接下来，您将向预览提供程序添加代码，以呈现不同设备尺寸的列表视图的预览。默认情况下，预览以活动方案中设备的大小呈现。您可以通过调用修饰符方法来更改预览设备。LandmarkList_PreviewspreviewDevice(_😃

第 1 步

首先将当前列表预览更改为以 iPhone SE 的大小呈现。

您可以提供出现在 Xcode 方案菜单中的任何设备的名称。

                .previewDevice(PreviewDevice(rawValue: iPhone 8"))

第 2 步

在列表预览中，嵌入实例中，使用设备名称数组作为数据。LandmarkListForEach

ForEach对集合的 *** 作方式与列表相同，这意味着您可以在任何可以使用子视图的地方使用它，例如在堆栈、列表、组等中。当您的数据元素是简单的值类型时（例如您在此处使用的字符串），您可以将.self其用作标识符的键路径。

        ForEach(["iPhone 8", "iPhone XS Max"], id: \.self) { deviceName in
            LandmarkList()
                .previewDevice(PreviewDevice(rawValue: deviceName))
            }

第 3 步

使用修饰符将设备名称添加为预览的标签。previewDisplayName(_😃

第 4 步

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

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/langs/877951.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
code code 管理员组
0 0
上一篇 2022-05-13
下一篇 2022-05-13

发表评论

登录后才能评论

评论列表（0条）

保存