iOS SwiftUI 创建和组合视图 2.2

第七节 子视图传入数据

LandmarkDetail视图目前还是使用写死的数据进行展示，与LandmarkRow视图一样，LandmarkDetail视图及它内部的子视图也需要传入landmark数据，并使用它来进行实际的展示

从LandmarkDetail的子视图(CircleImage、MapView)开始，需要把它们都改造成为使用传入的数据进行展示，而不是在布局代码中写死数据展示

步骤1 在CircleImage.swift文件中，添加一个存储属性，命名为image。这是一种在构建SwiftUI视图中很常用的模式，常常会包裹或封装一些属性修改器。

步骤2 更新CirleImage的预览结构体，并传入Turtle Rock这个图片进行预览

步骤3 在MapView.swift中添加一个coordinate属性，并使用这个属性来替换写死的经纬度坐标

步骤4 更新MapView的预览结构体，并传入每一个地标的经纬度数据

步骤5 在LandmarkDetail.swift中添加landmark属性。

步骤6 更新LandmarkDetail预览结构体，并传入第一个地标的数据

步骤7 把对应子视图的数据传入

步骤8 最后调用navigationBarTitle(_:displayMode:)修改器为地标详情页展示时在导航条上设置一个标题

步骤9 在SceneDelegate.swift中把应用的根视图替换为LandmarkList。应用在模拟器中独立启动时使用SceneDelegate的根视图做为第一个展示的视图

步骤10 在LandmarkList.swift中，传入当前行的地标数据到地标详情页LandmarkDetail

步骤11 切换到实时预览模式下去查看从地标列表页对应的行跳转到对应地标详情页是否正常

第八节 动态生成预览视图

接下来要在不同尺寸设备上展示不同的预览视图，默认情况下，预览视图会选择当前Scheme选中的设备尺寸进行渲染，可以使用previewDevice(_:)修改器来改变预览视图的设备

步骤1 改变当前预览列表，让它渲染在iPhone SE设备上。可以使用Xcode Scheme菜单上的设备名称来指定渲染设备。

步骤2 在列表的预览视图中，还可以把LandmarkList嵌套进入ForEach实例中，使用设备数组名作为数据。ForEach运算作用在集合类型的数据上，就和列表使用集合类型数据一样，可以在子视图使用的任何场景下使用ForEach，例如：stack、list、group等。当元素数据是简单值类型时(例如字符串类型)，可以使用\.self作为keypath去标识

步骤3 使用previewDisplayName(_:)修改器可以给预览视图添加设备标签

步骤4 可以在画布上多设置几个设备进行预览，比较不同设备下视图的展示情况

检查是否理解

问题1 除了List外，下面哪种类型可以从集合数据中展示动态列表视图

•  Group
•  ForEach
•  UITableView

问题2 可以从遵循了Identifiable协议的集合数据创建列表视图。但如果集合数据不遵循Identifiable协议，还有什么办法可以创建列表视图？

•  在集合数据上调用map(_:)方法
•  在集合数据上调用sorted(by:)方法
•  给List(_:id:)类型传入集合数据的同时，使用keypath指定一个唯一标识符字段

问题3 使用什么类型才能让列表的行实现点击跳转到其它视图页面？

•  NavigationLink
•  UITableViewDelegate
•  NavigationView

问题4 下面哪种方式不是用来设置预览设备的？

•  改变活动scheme中选中的模拟器
•  在画面设置中设置一个不同的预览设备
•  使用previewDevice(_:)指定一个或多个预览设备
•  连接开发机并点击设备预览按钮