iOS SwiftUI 创建和组合视图 2.1

第四节 创建地标列表

使用SwiftUI列表类型可以展示平台相关的列表视图。列表的元素可以是静态的,类似于栈内部的子视图,也可以是动态生成的视图,也可以混合动态和静态的视图。

landmark list

步骤1 创建SwiftUI视图,命名为LandmarkList.swift

步骤2 用List替换默认创建的Text,并将前两个LandmarkRow实例做为列表的子元素,预览视图中会以列表的形式展示出两个地标

landmark list file create

landmark list landmark list tow rows

第五节 创建动态列表

除了单独列出列表中的每个元素外,列表还可以从一个集合中动态的生成。

landmark list dynamic

创建列表时可以传入一个集合数据和一个闭包,闭包会针对每一个数据元素返回一个视图,这个视图就是列表的行视图。

步骤1 从列表中移除两个静态指定的行视图,给列表初始化器传入landmarkData数据,列表要配合可辨别的数据类型使用。想让数据变成可辨别的数据类型有两种方法:

  1. 传入一个keypath指定数据中哪一个字段用来唯一标识这个数据元素。

  2. 让数据遵循Identifiable协议

步骤2 在闭包中返回一个LandmarkRow视图,List初始化器中指定数据集合landmarkData和唯一标识符**keypath:**\.id,这样列表就会动态生成,如下图所示

keypath identifier list data

步骤3 切换到文件Landmark.swfit,声明Landmark类型遵循Identifiable协议,因为Landmark类型已经定义了id属性,正好满足Identifiable协议,所以不需要添加其它代码

identifiable data

步骤4 现在切换回文件LandmarkList.swift,移除keypath\.id,因为landmarkData数据集合的元素已经遵循了Identifiable协议,所以在列表初始化器中可以直接使用,不需要手动标明数据的唯一标识符了



第六节 设置从列表页到详情页的页面导航

地标列表可以正常渲染展示,但是列表的元素点击后没有反应,跳转不到地标详情页。现在就要给列表添加导航能力,把列表视图嵌套到NavigationView视图中,然后把列表的每一个行视图嵌套进NavigationLink视图中,就可以建立起从地标列表视图到地标详情页的跳转。

landmark list to detail

步骤1 把动态生成的列表视图嵌套进一个NavigationView视图中

embed in navigation view

步骤2 调用navigationBarTitle(_:)修改器设置地标列表显示时的导航条标题

landmark list navigation view

步骤3 在列表的闭包中,将每一个行元素包裹在NavigationLink中返回,并指定LandmarkDetail视图为目标视图

navigation link

步骤4 切换到实时预览模式下可以直接点击地标列表的任意一行,现在就可以跳转到地标详情页了。

list navigation

identifiable list

0 个评论

要回复文章请先登录注册