所有设备上的 SwiftUI

（所有设备上的SwiftUI） 好的 谢谢大家 欢迎 很高兴在这里见到你们 我很高兴大家对 SwiftUI很感兴趣 我是Jeff Nadeau 我在macOS的架构团队工作 我将和同事Ada Turner Meghna Sapre为大家 带来演讲

现在 我们希望你通过这周的演讲 已经了解过SwiftUI 但如果你需要一个总结 那么我们开始吧 SwiftUI是在任何设备上 创建优质app最简单的方式 （在任何设备上创建优质app 最简单的方式） 我们今天关注的焦点是 “每个” 在每个设备上

现在 当我们想到 为我们Apple的 所有设备创建app 我们会想到这些技术 我们在Mac上使用AppKit 在iPhone和iPad上 使用UIKit 使用UIKit的TVUIKit为 Apple TV创建app 接下来是 在Watch上使用 WatchKit

依照每种设备的强项和性能 这些UI框架是针对 每种设备来设计的 自然地 它们之间 有会有一些差别 以前 我们无法将其中一个 设备特有的代码 不做修改就移到其他设备上

但是 这一次 我们将介绍的一个UI框架 可以让你在任何设备上使用了 对app开发者来说 这是一个空前的好机会

但是这些设备都很不一样 我们如何使用UI框架创建一个 就能适配所有的呢？ （为所有平台设计） SwiftUI从开始就为适配 许多不同的UI范例而创建的 所以无论你是使用键盘和鼠标 或是一个多点触摸设备 又或是Siri Remote 甚至是Apple Watch上的 数码表冠 或辅助工具比如旁白和切换控制 SwiftUI被设计为 适配所有的这些 它为我们的平台设计惯例 提供了很大以及有创造性的支持 我们邀请了不同平台的专家们 来确保 当你在某个设备上 使用一个SwiftUI的元素时 会非常合适

这个系统可以允许你在 多个平台之间 运用你有限的知识 每个物件都能以相同的方式 适配良好 甚至当你为了支持一些 特殊的硬件时 比如MacBook Pro的Touch Bar 或是Apple Watch上的数码表冠 又或是Siri Remote 用来实现的工具具有连贯性 以及使用起来非常相似和简单

现在 通常的设计理念中 我们也在SwiftUI为一些元素 做了跨平台的统一支持 比如 每个平台都有切换控制 （通用元素） 你已经获得了一些布尔状态值 你想要切换 以及 你有一个切换的描述标签

所以 虽然 这个控制在每个设备上 表现形式都很不一样 它可能是一个切换键 一个复选框 或一个切换按钮 我们能提供一个单独的API 在任何设备上使用它

SwiftUI也用一套通用的 布局系统 所以当你使用一个栈 一个空间隔或一个填充 这些工具在每个设备上使用 起来都一样 那意味着你只要知道 在一个设备上为app布局 你就能适配所有的设备了

我们也有一些更高端的控制 比如选择器 选择器能从一个列表中 选择一个元素 它在不同设备上的UI设计不一 在macOS上 它可能是 一个弹窗按钮 在iOS或watchOS上 它会是滚轮风格的选择器

不管它们区别多大 你可能不会完全在 设备之间交替使用它们 但是你绑定的数据是一直不变的 当你使用其中的一个控制器 来适配你的模型工作 你可以很简单地在设备之间转移 现在我们没有时间来了解 SwiftUI上所有不同的元素 想要了解更多信息 你可以查阅SwiftUI基础演讲

现在 这是否意味着我能 完全依赖SwiftUI 设计一个app就能 在所有设备良好运行呢 我为4k电视设计的代码 是否就能完美无缺地 在44毫米的表盘上顺利运行呢

当然不能 （当然不能） 你知道的 一个尺寸的app 不可能适用于所有的设备 如果我们只想要在所有设备中 都坚持使用相同的设计方案 我们会错过app在每个设备上 的最佳展示 不会有奇迹发生 你必须为你的app在各个平台 做出正确的设计

现在 SwiftUI能帮你 运用你知道的技能栈和工具集 分散到各个设备

你的代码也一定能有机会 运用到多平台中

因此 我们认为写少量的代码 就能运用到多处运行 以及学习一种运用多处的方式 很重要 （一次学习 到处应用） 现在 我们将概念运用到实践中 我们需要创建一个app （我们创建一个app） 但 它更像是我们创建了4个app 每个对应不同的平台 （我们创建4个app） 我们创建的app 叫做Landmarks Landmarks的 作用是在整个国家 搜索和访问地标 （Landmarks） 想必大家都想看照片 以及获取这些地方的游客信息

我认为能获取目的地的地图和方向 会很棒

如果我们计划了一次旅行 为喜欢的内容做标记会是很棒的设计

当我们想要在所有设备上支持 我们的app时 我们要了解我们的app 在不同平台应该如何展示

所以 比如 在Apple TV上 很适合搜寻要去的景点

因为它的屏幕很大 你可以和家人 朋友或室友 一同查看 （为Apple TV设计的 Landmarks） 我们也想为我们喜欢的内容做标记 之后就可以再次查看了

Mac会是一个搜索的好平台 （为Mac设计的 Landmarks） 这是一个对比和获取对比信息 的好平台 可能还有一些更高级的整理和 过滤的功能

也适合阅读细节的内容 （为iOS设计的 Landmarks） 在iPhone上 我们会很想获取每个地标的简介 但使用图片的方式 来浏览太常见了 我们也需要获取抵达目的地的信息

当然 iPhone也是手机 那么 如果我们想要提前 打电话 自然也能做到

最后在Apple Watch上 我们能查看我们需要知道 的最重要的信息 （为Apple Watch 设计的Landmarks） 当有信息变动时 它是接收重要信息的绝佳平台

现在 最酷的 是app的iOS版本 你现在就能使用了 它是教你如何使用SwiftUI 新文档的一部分 你从最开始 你可以按步骤创建这个app （学习体验） 今天就可以下载了 它是学习创建 iOS app的好方式 作为一个结果 我们今天将更关注 如何在Apple TV、Mac 和Apple Watch创建这个app

在开始之前 有请我的同事Ada Turner 来为大家介绍如何在AppleTV 上使用SwiftUI （在Apple TV上 使用SwiftUI）

谢谢Jeff 大家好 我是Ada Turner 今天 我非常高兴能为大家 介绍关于在Appe TV上 使用SwiftUI

为TV设计app 意味着要考虑到Apple TV 独特的挑战 为家里最宽大的屏幕来设计app 幸运的是 你为Apple其他设备学习的 的技术和工具集 使用SwiftUI 就已经优化了在TV上优质的体验

今天 我会主要讲在宽大屏幕 设计良好用户体验的三个关键点 tvOS是一个10英尺的用户体验 而不是一个手机上的用户体验 人们使用Siri Remote 来与你的app交互 而不是一个触碰屏幕或一个鼠标 和键盘 有流线型的导航 对tvOS的app尤其重要 这样人们可以直接 进入你app的内容 现在 什么是10英尺的 用户体验呢？

是这个

而不是这个

你的app应该强调丰富沉浸式 的用户体验 比如美丽的图像或视频l 而不仅仅只是完成像是 做笔记或获取方向的任务 （10英尺用户体验） 从其他设备分享SwiftUI代码 给你的Apple TV app时 在房间长时间 以及可能多人同时观看大屏幕时 需要小心考虑 哪种用户体验最好

我们来看在TV上 我们决定 为Landmarks支持 以及去掉哪些功能

最简单的方式是 引入Landmarks上 在大屏幕上看起来非常好看的照片 （Landmarks - 什么需要去除呢？） 在客厅里一起挑选最爱的那个 是我们要记住的tvOS app 最核心的功能之一

我们也包含了基本的游客信息 比如时长信息和费用 这样人们在浏览他们要去 参观的地方时 就能做出正确的选择

现在 虽然我们的数据支持它 我们还是决定不去包含 很长的每个地标历史具体信息 因为在TV上展示 这样的内容不太合适 我们也决定 不包含相对高级的整理和过滤功能 因为这样的功能 在Mac和iPad上 使用更为合理 最后 虽然我们的数据包含了 地理坐标位置 我们决定不实现地理围栏通知功能 因为旅行时使用tvOS app 是非常罕见的用户用例

接下来 我们来了解一下焦点

人们使用Siri Remote 来与tvOS app产生交互 它已被优化 你能在app界面 毫不费劲地滑动 你要谨慎在你整个app的界面中 使用焦距来直观地导航 幸运的是 许多SwiftUI的 标准用户元素 比如列表 按钮 文字域和切换键 都能在tvOS上良好地使用 能适应不同的外观和用户操作行为 它在大屏幕和使用焦点交互时 看上去很赞

如果你实现了你自己的自定义控制 SwiftUI提供了一个 可聚焦的视图修饰符 在你的视图获得或失去焦点时 它允许你控制你的视图是否 能聚焦和执行一段代码 你也能使用 onPlayPauseCommand onExitCommand 视图修饰符来回应用户 当你的视图聚焦时 在Siri Remote点击 播放暂停和菜单按钮

（流水线导航） 谢谢

最后 我们来深入了解一下 tvOS上最棒的导航实践

在Mac或iPhone上的 深层嵌套的导航上 操作长的 垂直地可滚动的表单内容 体验很好 但在tvOS上 人们想要一个轻松地 着重于内容浏览体验 使用SwiftUI简单的 组合堆栈视图 列表视图和滚动视图 我们就能在为Landmarks 在TV上 创建一个像这样的用户界面 有垂直堆栈的水平滚动的架子 它充分利用了TV宽频的优点 允许人们不用在页面间切换 就能浏览不同类别

首先 我们来看一下 我们要如何为Apple TV构建 一个SwiftUI app的 顶层导航 标签视图是实现许多tvOS app导航的主要的方式 它允许你将你app内容 归类到明确的类别 它们非常容易切换 在顶层的每个视图 提供了连续的指示符 允许用户知道他们在app中的位置

导航视图允许你包含页面的内容 不用一个标题或按钮就能 选择性地展示一个导航栏

我想简洁地说明一下 在tvOS和iOS构建 你app顶层导航的区别

在iOS上 如果你使用一个标签视图 它通常会在你app的顶层视图 它的每个子视图 可能会是一个的导航视图 包含你app内容的 导航视图的根视图 基于这个架构 当人们深入了解你app的内容时 标签栏仍保持可见 允许人们在任何时候都可以 简单地切换标签

这里 Photos中 在跳转至详情页面后 标签栏在屏幕底部一直处于可见状态

这样用户就不用返回导航 简单地切换标签就可以了

然而

如果你在tvOS上使用标签视图 你会想要让导航视图 出现在你app的顶层视图 并将它的根视图设为你app的内容 的是标签视图的直接子类的标签视图 使用这个架构 当人们通过导航深入 了解你app的内容时 我们想要顶层栏消失 因为tvOS其实 是强调你app内容的全屏幕体验 （tvOS和iOS的 导航层级的不同点） 这是TV的Photos 当我们从导航 跳转到相册详情页时 标签栏消失了 这样用户就能专注于相册的内容

SwiftUI视图是高复合型的 所以在tvOS上重组你app的 导航架构非常容易 标签视图 导航视图

和内容视图之间的嵌套关系 都是你代码中 固有结构的可视化展现

现在 我们来实践一下 这些概念 为TV来调整 Landmarks的设计 （演示） 首先 我们不再需要 导航栏按钮标题

接下来 我们去掉这个导航按钮和 数据标题标签

我们来看看是什么样子

这是我们做出的一个优化 这个长的垂直滚动列表 在tvOS上不怎么好看 那么 我们来用一个嵌套的 HStack滚动视图取代一个列表

我们在一行内使用一个类别 来展示所有地标

我们来仔细看一下行

它和使用额外地一个包含了标题标签 以及一个包含了forEach landmarks 的HStack的VStack 类别地标很相似 在纯文本视图内 有一点需要留意 我使用了一个自定义视图 叫做landmarkCard 它是导航按钮的标签 我将这个视图直接分享到 iOS app 我们来运行一下

只改变了几行代码 它看上去比之前好多了 我现在有个好看的 含有图片和垂直滚动视图的 邀请大按钮 它充分利用了宽频的优点

这里 我要指出的一点是 当我们仍在地标行内 使用相同的导航按钮视图时 它的外观变化了 右侧的V形标志不见了 背景也不一样了 这是因为导航按钮 不再在列表视图显示了 它自动地适配了它的外观 现在 当水平滚动内容 在大屏幕中看上去美观了 但它有点太过于水平了 我们通过将主视图的 HStack改为VStack 来垂直地排列这些类别

接下来 在行的HStack周围 添加一个嵌套的滚动视图

我们来运行一下

这感觉很棒 在不同类别和在一个类别中的 地标之间来回浏览 非常容易了

最后 我们来看一下详情页面

这个好看的无边框地标图片 如果没有被高密度的文字遮挡 会更加好看 我们来看看如何为 Apple TV优化

我们先看一下详情页面

这是一个非常简单的视图 我们有一个展示了地标图片的背景 一个最爱按钮和一些历史详情介绍 我们来试着展示游览详情介绍 最后试一下

它看上去好多了 只展现了有着美观大字体 的最相关的详情内容 我们能在房间里轻松观看阅读 我们可以标记一些地标为最爱 方便我们在macOS的 Landmarks上搜寻更多详细信息

现在 有请Jeff回到舞台

谢谢Ada 我很喜欢Ada美观的 列表式UI设计 只需将她已有的一些内容重新布局 就让我感觉像是 在家里使用Apple TV 我认为这充分展示了框架的强大 那么现在我们来看看macOS 创建一个好的Mac app需要 留意很多方面 如果可能的话 我很想用一个小时来讲解 但我只会介绍SwiftUI 能帮你的几个关键部分 高信息密度 多窗口支持 键盘捷径和 MacBook Pro的触控栏支持

我们从高信息密度开始介绍 （高信息密度） 我们一般在Mac上会开很多窗口 所以我们可以使用它 来提供一眼能看到的更多信息 如果你在一个地方有所有的信息 那会让我们更容易做出 好决定和更好的对比

因为我们在Mac上有一个精确地 定点设备 我们能容忍更小的 点击目标和密度控制 但那并不意味着你的app看上去 要像一个飞行驾驶舱 但它代表你能在一个地方 提供更多的功能 为你的内容留出更多空间

以及 如果你有文字内容的话 Mac适用于阅读大量文字内容 所以 app会话时长 在Mac上通常会更长 你通常需要坐下来使用它 所以用它来预览和阅读 一些文字内容是非常舒适的

现在SwiftUI自动地为Mac 调整了元素之间的合适间距和填充

以及 你可以使用controlSize 修饰符 在macOS系统中 来进行小且迷你的尺寸控制 如果你想要使用更小的控制器 来创建一完整的检查器会很好

接下来 多窗口 多年以前 多窗口已经就是 MacUI的主要功能之一了 用户喜欢使用多窗口 他们喜欢同时使用多个窗口 来比较内容

将单个物件拖出来成为 一个单独的窗口通常是很棒的 这样你就能专注于它的细节内容了

许多用户喜欢在他们的桌面和空间 管理他们的窗口的空间大小 如果你支持多窗口的话 你就能解锁这些功能 SwiftUI让一切 都变得很简单了 我会向你展示一个例子的一小部分

（键盘捷径） 接下来 键盘捷径

键盘捷径是MacUI重要的一部分 Mac用户 特别是高级用户喜欢 使用键盘捷径 来操纵控制一般的命令 或只是在你的app的 导航快速来回切换

在SwiftUI中 支持键盘捷径非常简单 我来给你展示一个例子 我们有一个标签视图 我们有三个标签“explore” “hikes”和“tours” 我们要做的是将这几个标签 绑定至命令一 二 三 这样我们就能快速切换它们

现在 当我们想要在Mac上设置 一则键盘捷径 我们要去的一个地方是 Mac的菜单栏 我们想要在Mac的菜单栏添加 键盘捷径 因为它让它们更容易被发现 它确保了我们在这里匹配的动作行为 也是可以用鼠标操作的

现在你可以在代码中实现它 我已经在Storyboard中 设置了它 接下来 我完成的是 为这些键盘捷径的每一个都 指定了一些命令 一条命令就是一条能通过 SwiftUI层级被 发送的命令名字 我们可以使用它们来包装选择器 通过每一个菜单物件来发送

总结一下 我们所要做的只是 使用我们想要在视图中使用的命令 的onCommand修饰符

当前情况下 我们传递刚才定义的命令 当命令出现时 这段代码就会执行

在这里 我们设置了我们标签 视图已经绑定的 selectedTab变量 所以当我们使用这些命令中的一个时 selectedTab变量会更新 标签视图也会收到通知更新它自己

如果你想了解关于 识别键盘捷径 和像这样的其他系统级 集成的更多内容 你可以参加今年的 集成SwiftUI演讲

最后 是触控栏

触控栏是另一个在你的Mac上 快速执行命令的方式 它为你的指尖 带来了最常用的上下文行为操作

现在SwiftUI中支持触控栏 是前所未有的简单

我会给你展示一个例子 我们在代码中定义一个触控栏 接下来 就像我们我们创建一个列表 或一个堆栈 我们只需在TouchBar中 一个接一个的添加我们需要的元素

当我们想要将它添加到一个视图时 我们只需使用.touchBar修饰符 将它传给 我们定义过的TouchBar 就这么简单 无论这个视图是否被选中 或是选中视图的最近的祖先视图 触控栏硬件上会出现这些控制

现在 我们回到我们的示例 我们在macOS的Landmarks 上实践了其中的一些功能 （演示） 好的 我们现在在Xcode中

我们来构建运行一下macOS 上的Landmarks 这样我们就能知道怎么开始了

好

我们这里有一个 相当标准的主详情视图 我们的左边有一个地标列表 右边是详细信息

我们添加了一些过滤控制 这样我们就能通过类别来过滤 或是只选择看我们的最爱

现在 最有条理的是 左边的列表 实际上是我完全从iOS上 挪用过来的 相当好 它给了我开始创建这个app 很大的一个优势 我并不需要做任何适配 我不需要为它匹配一个新的数据源 或代理协议 或其他类似的事情 我什么都没有做就获取了这些

但我觉得这个列表在Mac上 可以更好看一点 我希望我可以在滚动视图中看到 更多的元素 我想要在每一行获取更多的细节

我们从这个是如何定义的 开始了解吧

在我们的地标清单 我已经定义了一个 MacLandmarksList 包装这个landmarkList 的是一个通用元素 我之前介绍过

为我们的项目实现 这样的架构非常方便 因为它让我还是可以 使用这个列表的大部分功能 但我也可以为我的Mac 做一些特殊的自定义

我们继续来看它是如何被定义的

我们有一些描述了 我们早些时候看过的过滤控制 配置的过滤标准 我们有一个绑定了被选择的地标列表 这样我们就可以查看 和修改这个列表了 我们有一些用户数据 这样我们就 知道哪些地标被我们标为了最爱

这个列表相当简单 你之前一定见过它很多次了 我们有一个列表 我们使用forEach 来遍历展示我们所有的地标 接下来 我们为每一个 创建了一个landmarkRow

这是一个硬编码类型 这是我们正在使用的行类型 现在 我们可以开始做一些 类似用if语句 使用每一个OS交换地标 但 我很不想用诡异的方式 来实现这个功能 我想要创建一个可以复用的工具 我来向你展示我接下来如何实现

那么 我会

重新定义这个列表

让它成为我们将要使用的 地标行的通用类

接下来

我会添加一个属性

它是地标的一个闭包 是我们刚才定义行的类型 为一个通用类

接下来 取代硬编码的方式 我将委托

行的创建到我的块中

现在 为了在我的Mac的 地标列表中适配它 我要做的是 在这里更新我的类定义

添加我刚声明过的闭包 行的提供方

和返回一个行类型

幸运的是 像其他好的TV示例一样 我已经有一个成品可以使用 那么 我们就用它

我们来看一下现在是什么样子

现在更棒了 我的行比之前更紧密了 我为每一个添加了更多的信息 我能一眼看到哪一个被标为了最爱 非常好 最棒的是我的列表的实践 还是分享公用的 所以 如果我已经有高级过滤 排列或按需分组功能 或更棒的 比如我有一些异步的数据 或网络操作 你知道的 我只想写一次代码 现在 我们能做到了 我们无需向原有的设计妥协

接下来 我想要做的是 双击其中的一行来打开它自己的窗口 这非常简单 我告诉你怎么做 首先 我们需要创建一个窗口 在Mac上 甚至当我们使用SwiftUI定义 我们的视图时 我们还是要使用AppKit来 定义我们的窗口

现在 我可以 在Storyboard里实现 不过 代码也很短 我来告诉你怎么写 我们有一个窗口控制器 接下来 我定义了一个 convenience初始化方法 它需要一个SwiftUI视图 将它放入一个 hostingController 接下来 创建一个环绕 hostingController的窗口

我也在这里写了便捷代码 它用来追踪已有的地标所属的窗口 如果我双击已有窗口的一行 它会将已有的窗口挪到前面 而不是每次再创建一个新的

我们回到我们的列表来集成这个 那么

细节

我们添加一个快速

方便的方法

分享

为一个已有的地标展示一个窗口

接下来 绑定到一行 我可以只添加一个两次点击的行为 因为我只想识别双击

接下来 在这个tapAction中 我为landmark调用 showDetail方法

现在 当我双击我的行

我就能单独为它们打开它们自己的 新窗口了 我可以将它们放在一边 按我的喜好排列它们 因为这些都还是AppKit窗口 我能使用所有内置的窗口功能 比如我喜欢标签 我能将它们合并成标签 就像这样 我毫不费力实现了 很棒

我觉得Mac版本的app 开始变得好看了 所以我决定继续 回到我们的幻灯片 （演示） 现在 我们了解了AppleTV 和Mac上的SwiftUI

下面我们来看 Apple Watch SwiftUI是第一个为 Apple Watch 创建app设计的完全原生的框架 我认为它会带来更多的可能性 以及带我们认识到这些可能性 我想有请我的同事Meghna （Apple Watch上的 SwiftUI） 谢谢

谢谢Jeff 你已经看到了使用SwiftUI 创建的令人叹服的种种 你一定能按照步骤创建一个 在所有平台都体验很棒的app 大家好 我是Meghna 我将为你介绍 如何为你的Apple Watch app 带来良好的用户体验

你的用户体验可能基于你的app 在watchOS上的体验更是如此

并发、Siri捷径和通知 都用来在你的 Apple Watch 屏幕上展示实时信息 Apple Watch为在正确的 时间展示正确的信息所设计的 本次演讲的目的 我会重点介绍app与通知 （watchOS app） 我们以SwiftUI是如何允许你 展示元素以及布局你app的UI 开始介绍 这是前所未有的 （3次或更少点击） 首先 最重要的第一件事 在设计Apple Watch 用户体验时 需要了解 使用2次或3次点击就能 获取到最重要的信息或关键操作 是一个好的规则 在设计用户体验时 目标并不是缩减你iPhone上 的app功能 而是在你的手腕上 带来最实时和相关的内容操作 （watchOS app） 那么 我们来深入了解一些 SwiftUI简单的概念 如果你的内容会超出全屏的边界 你可以使用SwiftUI的 滚动视图来包装你的内容

SwiftUI也为你带来了这个很好用的 全新的digitalCrownRotation API 它让你能完全控制旋转和触感 这个API也为数码表冠 打开了一扇门 带来了修改界面元素的全新方式 这是前所未有的功能

你可能也熟悉WatchKit 的分组 SwiftUI现在提供了 很多强大的方式 来通过水平和垂直的堆栈 来管理你的内容

使用列表和列表部分 展示列表信息比之前更简单了 （可交互的通知） 最后 了解你的用户 在你的Apple Watch app最关注的是什么 会帮你判断决定在屏幕展示 哪一类的数据 使用SwiftUI提供的 视图和控制器 首先 你能轻易地创建一个 展示最重要的信息的界面

通知是更新实时消息的最好方式 然而 如果展示了过多的 无用信息或内容 用户可能就会直接关掉你的app

SwiftUI为你提供了便捷 有利的控制器 这样用户就能在你的app中回复 不会错过通知了 让你的通知变得可操作 你可以让用户快速回复

你发送通知的时机和 你发送的内容同样重要 试着了解你的用户使用你的app时 发送你能提供的可发送的信息 在最合适的时机发送实时消息 （为Apple Watch设计的 Landmarks） 利用全新强大的SwiftUI概念 和一个对在Apple Watch上 怎样的用户体验是优秀的 有更好的理解 我们来看一下添加了一些概念后的 Landmarks app

使用SwiftUI 为所有平台创建app时 你会有一个有用的 Apple Watch app 不过 它并不代表这会是 Apple Watch的最佳用户体验 我将会为你展示如何稍微调整和更新 这样你的app在手腕上 会有更好的用户体验

那么 你这里看到的是 首先 我们来创建一个地标列表 为Watch上的 Landmarks 我们自定义了详情单元格

我们为一些上下文加入了一张图片 我们加入了一些工具的细节 我们也添加了一些联系功能 其中的一些功能比如联系功能 不需过多说明 一个Apple TV app 但它们在Apple Watch app运作体验非常棒

不过 这里还是有太多 需要滚动的内容 所以我们要做的是删减它 只展示我们的最爱 为了实现 我们创建一个 简单的Swift过滤器

虽然我们已经减少了内容 我们也想要我们的用户能有机会看到 所有他们选中的地标 添加这个按钮就能实现 这个按钮简单地基于你当前的视图 在显示所有和 最爱之间切换 SwiftUI为你的app提供了 选择你感兴趣的内容 的特别的功能 以及为你的app 组织最适合的用户界面

我们想要专注于我们当前滚动时 出现的单元格 使用SwiftUI 我们可以用 carousel列表样式来实现 当你单元格比较少或 当你的单元格具备交互功能时 这个列表样式会非常适用 这里 我们的单元格有联系方式 能打电话 从最爱列表里添加和移除地标 以及一些导航功能 的功能按钮 （可以交互的通知） 最后 通知 当一个新的旅行被添加时 我们想要在 Landmarks app通知你 我们想要加入一些图片 这样你就能判断 你是否对这个旅行感兴趣 你也能在通知中预订它

利用Swift的强大功能 你不仅有文本信息 你也有这个美丽的 具有丰富动画效果的图片 我想要向你展示我们是如何创建的 而不只是单纯介绍一下

你看到的是我为一则新的通知 创建的一个结构体 现在 我已经关联了 这则通知到我的通知控制器 这意味着你看到的主体的内容 就是我运行这个计划之后 通知里的内容

这个结构体将一个地标作为一个参数 通知将要合适地传递它

接下来

我们来加入一些文字

好的 我们在这创建了 一个包含了 一些文本信息堆栈 我在这使用一个堆栈的原因只是 因为我将在这里面 加入更多的一些数据

在这里 我们创建了一个结构体 叫做slideshow 它存储了一个字符串数组 这些字符是图片的名字

我们有一个 currentIndex变量 它用来追踪你当前看的是 第几张图片

我创建的TourImage是一个 自定义的结构体 也是一个视图 它存储图片的名字 它会在我的app里将图片排列整齐

我们来看一下在预览中是什么样子

接下来 我要在这里添加的是

每个图片的ID 我们让它展示动画效果的方式 我们会关注哪一个视图需要被插入 哪一个视图需要被移除

它现在是这样 好的 我们的文字在这 好棒！ 它现在是这样 我们继续 在我们通知主体里添加这个 slideshow结构体

好的 当它更新完成后 我们就能在这里看到视图 这看上去很棒 就像我们之前聊过的 我们应该能够在这个结构体里支持 多张图片 所以 我们需要计算下一张的序列号

我们来实现它

现在 我在这简单地计算了 下一张的序列号 我更新了当前的序列号

我还想将改动添加动画效果

每次当我的当前序列号改变时 就会有一个简单的动画效果 它会展示fluidString的 动画效果看上去很棒

现在 我们将它创建完了 但我们还没有将它关联到其他物件

在我们的Zstack 间隔一段时间后 我们想要切换到下一张图片

所以 我在一个视图上创建了 一个扩展 它有一个视图修饰符

展示下一张图片是一个简单 的视图扩展 它具备了一个两秒钟的定时器 每两秒后 它会切换到下一张图片

现在 我要添加的最后一件事是这个 好看的滑动变换

就是这里简单的命令

好的 我们来看一下效果

好的 我们滑动这些图片 我们之前为通知控制器关联了一些 操作行为

如你所见

谢谢

如你所见 只需小小的改动 我们就创建了这个美丽丰富的消息 这是watchOS之前 不可能实现的 我们有请Jeff回到舞台

好的 谢谢Meghna 通知里的这些丰富的上下文交互行为 非常酷 我认为SwiftUI将会 为watchOS带来更多的可能性

现在 经过短暂的旅途 我们来回顾和总结一下今天的演讲

首先 当我们思考 为一台设备设计一个app时 首先是设计 这并不意味着我有了代码 我要试着让它在这里运行 思考我的app应该怎样 在这台设备上正确展现 以及这里开始的逆向工作 （总结） 不过 你有时可以分享一些代码 比如 我们虽然没有明确指出 但你今天看到的每个例子 都是很轻松地利用了模型代码 每个目标中都被编制了 相同的模型代码

你也可以分享视图代码 你只需要使用时好好判断 SwiftUI也能帮你简单地 重构可多次使用的小组件 它能合理地在多个设备上使用

最后 我们并不单单只是编写一次 多处运行 你要好好运用自己的头脑 当你学过一次 你就能在多个 设备上实现了 我觉得那才是真正厉害

一如既往 你能在网上看到这个演讲 你可以重看视频和获取到相关资源 谢谢你的聆听 我们期待你使用SwiftUI 来创建app （WWDC19）