iOS SwiftUI 应用设计与布局 1.1
第四节 组合首页
Landmarks
应用的首页在用户点击查看地标详情前需要先把地标的一些简单信息展示出来。复用之前创建的视图构建具体某一类别地标的行视图
步骤1 在CategoryRow.swift
文件中,与CategoryRow
类型并列,创建一个新的自定义视图类型CategoryItem
,用这个新的视图类型替换CategoryRow
的地标名称Text
控件
步骤2 在CategoryHome.swift
中,添加一个名为FeaturedLandmarks
的简单视图,这个视图用来显示地标数据中isFeatured
属性为真的那些地标。在之后的教程中,会把FeaturedLandmarks
这个视图修改成一个交互式轮播图。目前,这个视图仅仅展示一张缩放和剪裁后的地标图片。
步骤3 把视图的边距设置为0,让展示内容可以尽量贴着屏幕边沿
第五节
现在所有类别的地标都可以在首页视图中展示出来,用户还需要能够进入应用其它页面的方法。使用页面导航和相关API来实现用户从应用首页到地标详情页、收藏列表页及用户个人中心页的跳转。
步骤1 在CategoryRow.swift
中,把CategoryItem
视图包裹在NavigationLink
视图中。CategoryItem
这时做为跳转按钮的内容,destination
指定点击NavigationLink
按钮时要跳转的目标视图。
步骤2 使用renderingMode(_:)
和foregroundColor(_:)
这两个属性修改器来改变地标类别项的导航样式。做为NavigationLink
标签的CategoryItem
中的文本会使用Environment
中的强调颜色,图片可能以模板图片的方式渲染,这些都可以使用属性修改器来调整,达到最佳效果。
步骤3 在CategoryHome.swift
中,添加一个模态展示的用户信息展示页,点击了用户图标时弹出展示。当状态showProfile
被置为true
时,展示用户信息页,当showProfile
状态置为false
时,用户信息页消失。
步骤4 在导航条上添加一个按钮,用来切换showProfile
状态的值:true
或者false
步骤5 在CategoryHome.swift
中添加一个跳转链接,点击时跳转到全部地标的筛选页面。
步骤6 把LandmarkList.swift
中的把包裹地标列表视图的NavigationView
移动到对应的预览视图中。因为在应用中,LandmarkList
总是会被展示在CategoryHome.swift
定义的导航视图中。
检查是否理解
问题1 对于Landmarks
这个应用来说,哪一个视图是它的根视图?
- SceneDelegate
- Landmarks
- CategoryHome
问题2 CategoryHome
这个视图是如何与应用的其它视图联动起来的
- 在不同地标之间复用图片资源
- 与其它视图使用一致的命名规范和属性修改器语法
- 使用导航结构把地标应用中所有视图连接在一起