Mac 上的 SwiftUI：构建基础

♪低频音乐播放♪ ♪ 马蒂厄托泽：大家好 我是马蒂厄托泽 是macOS SwiftUI团队的工程师 SwiftUI的核心是一个多平台框架 其目标是在任何地方轻松 构建出色的应用程序 在接近任何新概念或API时 我们先退后一步来想想 每个平台对该功能的期望 SwiftUI的优点在于它的API和概念 适用于所有平台 在这次座谈中 我们将展示 这些是如何针对Mac进行微调的 这会是一次手把手的编程过程 你将在其中下载骨架项目 并与我一起编写Mac应用程序 在开始之前 让我们先回顾一下 我们在开发应用程序时提过的 Mac应用程序中的一些关键原则 这些是灵活的、熟悉的 广泛的和精确的 Mac应用程序非常灵活 可以根据我们每个人的 个人使用方式进行调整 这从我们如何 实际使用我们的Mac开始 从键盘、鼠标、触控板、开关控制 甚至iPad… 然后扩展到软件本身 我可以通过调整表格列、侧边栏 详细信息面板 显示模式和窗口成为适合我的方式 来自定义我的工作流程 并且界面会适应 同时 Mac应用程序也很熟悉 使用与系统一致的控件 和设计模式来让应用程序 多亏了共同的视觉语言 立即变得平易近人 例如 文件菜单是我 创建新事物的地方 而搜索栏 则是在我所有的应用工具栏上 都有一致的外观 你可以通过划分窗口区域 来使你的应用程序更易于使用 保持侧边栏中的导航和层次结构 中心的内容 和用户功能沿着顶部和右侧 但是这种一致性仍可以为 应用程序的独特性 和在其他应用程序中 脱颖而出留下空间 你可以添加自定义 例如应用强调色 当你发现需要自定义控件时 应将其设计为适合系统控件 Mac应用程序非常广泛 大型、且通常有多个显示器意味着 可以在屏幕上组织更多信息 而不会被隐藏在 钻入式导航堆栈中 具体来说 扩展意味着 使用带有大纲视图 和缩略图预览的侧边栏等控件 瞬态元素的弹出窗口 在控件窗格之间切换的选项卡 和披露组以显示内容 最后 Mac 应用程序是精确的 他们不仅有大窗口 而且他们的视图 也有更小的边距和间距 这导致内容和控件的高密度 并且这些控件是为了 与鼠标指针一起使用而生 尽管如此 增加密度并不一定 会导致复杂性增加 一个服务于简单、单一目的的 应用程序 仍然可以是一个伟大的Mac应用程序 你可能会从你最喜欢的Mac 应用程序中 识别出这些想法 我们接下来将在实践中应用这些想法 我将与你一起构建Mac应用程序 在此处点击暂停并下载项目 该项目将包含此座谈的起点和终点 我真的很喜欢园艺 多年来我认为有一个专门的应用程序 来追踪我的花园会很棒 我们将为Mac构建这个应用程序 我们将利用平台功能 例如灵活的窗口和高信息密度 使我能够以一种在macOS上 感觉很棒的方式真正 与我的应用程序数据交互 在左侧 我有一个侧边栏 显示了我所有花园项目的大纲视图 我可以选择一个花园并在表格视图 或画廊中查看所有植物详细信息 让我们开始实施这个应用程序 打开初始项目中的 Session1.workspace 我们有一个包含一系列植物的 花园结构 我们有一些视图和助手 可以加快我们前进的速度 但我们将从ContentView开始 我只是要折叠我的侧边栏 并为我的Xcode预览腾出一些空间 我们的Mac应用程序将具有两列布局 我打算将此文本视图嵌入到 NavigationView中 我将删除填充 并将文本更改为侧边栏 第二列将用于我们的植物表

这种扁平化的层次结构 在Mac的大屏幕上 为广泛的导航体验提供了坚实的基础 让我们继续我们的侧边栏 如果我按住Command键单击 我可以提取此视图 进入它自己的子视图 我将它重命名为“侧边栏” 我需要访问我的商店

我想显示我今年花园的列表

我们将在标签中显示每个花园的名称 与叶子的系统图像

我希望能够看到哪些花园是当前的 把历史放在它自己的环节 然后通过单击显示三角形 来精确控制我看到的内容 我们将使用DisclosureGroup 它使我们的导航系统更加扁平化 同时提供一种熟悉的方式 来管理复杂性 我要将列表更改为ForEach 如果我按住Command键单击 我可以选择将其嵌入列表中 我们已经定义了迭代过的内容 所以我们可以清除它 现在 这个表达式 相当于我们之前的表达式 但现在我们可将ForEach嵌入到 DisclosureGroup中 而对于systemImage 好吧 这个有点难念 但我们开始吧 我们将使用 chart.bar.doc.horizontal图像 好 太好了 我把我的花园 组织成一个大纲结构 让我可以灵活地控制我所看到的内容 但我希望当前组默认打开 并保持扩展状态 每次我打开应用程序 这让我的应用程序更加熟悉 为了保存expandState 我们将向侧边栏添加一个属性 我将使用@SceneStorage 属性包装器对其进行注释 提供一个expandState的密钥

这将告诉了SwiftUI 在应用程序退出时卸载此属性 并在窗口恢复时重新加载它 现在我将传递一个绑定 到今年的DisclosureGroup…

而现在当前组已经扩展了 我觉得我的侧边栏有点紧凑 所以我只要设置一个最小宽度

我会在一个环节中显示历史 我将使用我之前做的 GardenHistoryOutline视图

我也会传递那个expandState

当我可怜的植物需要水时 我将添加一个徽章来凸显它 好的 为了看到右边的细节 我需要添加选择 我们将为所选花园的ID 添加一个绑定 然后我们可以提供该选择 作为列表的绑定 Sidebar的父级ContentView 将会保留该值 将绑定传递到侧边栏和表格 所以我也要把它复制到这里 我要把它弹出到@SceneStorage 以便它在运行之间保持不变

我也会将它传递给侧边栏 我认为我的侧边栏看起来不错 我可以通过显示三角形 控制我看到的内容 如果我的Mac重新启动 一切都会恢复到 我刚退出时它的样子 我们现在可以开始使用 GardenDetail视图 它也需要绑定到选择 如果我按住Command键单击 我可以跳到视图的定义 这个视图已经包含了我们商店的属性 以及我们很快就会使用的 其他一些属性 它还设置为显示花园的名称和年份 作为导航标题和副标题 我们将在详细视图上的 自己的变量中实现该表 我们将在主体这里使用它 让我们简单地从展示花园里的 植物清单开始

我们可以在水平堆栈视图中 显示其他植物属性 但是我们有很多数据要显示 而且很多都是文字的 此外 我们想添加按字母顺序 或我们种植的顺序 对植物进行排序的功能 出于这些原因 我们将在表格中显示植物 表格提供了一种在扩展UI中 查看、过滤、排序 和编辑数据的精确方法 充分利用屏幕空间 通常 如果你有视觉元素要显示 并且不需要复杂的排序 请使用列表 否则 如果你需要多列 请考虑使用表 我要用表格替换列表 并提供一些列来划分每一行

就这么简单 我有一个只有一列的表格！ 所以让我们添加更多的列 我想知道每株植物的生长 需要多长时间 所以我将为此添加一列 而不是提供关键路径 我将打开 TableColumn的内容闭包 它会把一株植物递给它 现在 我们可以在这里提供 我们喜欢的任何视图 但是daysToMaturity 属性是一个整数 所以我们将提供一个 带有格式化字符串的文本视图

我有很多植物 而且我总是种植更多 能够选择和排序行 将有助于保持我们的植物井井有条 所以首先我们可以 为选择添加一个绑定 在让表可排序时 我们需要确保提供sortOrder绑定 以及每列的关键路径 所以我们需要向daysToMaturity列 添加一个关键路径 为了真正发挥表格的力量 让我们在视图文件夹里 从TableColumns文件中 粘贴更多的列 他们会让我们设定一些关键日期 并将植物标记为最喜欢的

我现在要关闭预览并运行该应用程序

看看所有这些植物数据！ 我可以选择行 也可以单击列标题对它们进行排序 这很棒 但现在我没有办法 执行管理花园所需的许多基本操作 例如在桌子上添加一株新植物 或将多株植物标记为已浇水 工具栏是此类操作的熟悉位置… 这个标准位置 让macOS用户可以发现 使用你的应用程序的方式 我们可以在这里添加一个工具栏 从添加植物的按钮开始

我们会给它一个标题为 “添加植物”的标签 和系统图像“加号” 我要构建和运行 现在我可以往我的桌子上 添加一棵植物！

对我们应用程序界面的自定义 也可以在工具栏中显示 例如我们更喜欢如何欣赏花园 我们可以在这里添加 DisplayModePicker 我有很多植物 虽然我可以排好它们 但快速又精确地缩小行数 这会很棒 我们始终可以立即访问 Mac上的硬件键盘 所以我要将searchable修饰符 添加到表中 将绑定传递到 searchText searchText 是详细视图上的一个属性 用于过滤 被拿到桌子上的植物数组 构建和运行

这就是我们添加搜索过滤 所需的一切！ 我们已经设置了窗口的结构 但我真的很想同时看到我的蔬菜补丁 和我的后院花坛 好吧 事实证明我们 已经拥有了这种能力 我可以从文件菜单打开一个新窗口 每个窗口都有自己的选择 和侧边栏扩展状态 当然 每个工具栏都属于自己的窗口 因此我可以将植物 添加到蔬菜地或花坛中 我的植物需要定期浇水 我希望能够对我的植物 进行分类和过滤 选择一些行 然后一次性 将它们标记为已浇水 我们将向 macOS 主菜单添加执行这些操作的命令 菜单是一个熟悉的用户界面 甚至可以搜索 帮助人们探索你的应用程序 在添加我们的自定义命令之前 让我们先添加一些 系统为我们提供的命令 移至GardenApp文件 我要添加命令修饰符 到WindowGroup 并添加 SidebarCommands() 现在可以从“视图”菜单切换侧边栏 或使用键盘快捷键 现在是我们的自定义命令 打开主菜单文件夹中的 PlantCommands文件 我希望能够在最前面的窗口 向花园发送动作 所以我需要一个花园变量 我们将使用 @FocusedBinding属性包装器 将键路径传递给 我在FocusedValues 扩展中定义的自定义属性 植物命令菜单项还需要知道 表中选择了哪些植物 所以我们可以检查它们是否浇水 所以我们也需要传递选择

转到正文 你会注意到命令的声明 与视图类似 这意味着你可以创建自己的 并构建一个自定义的命令树 来表示你的菜单 首先是添加植物动作 现在 虽然我们已经可以 从工具栏中添加植物 但主菜单应该包含 你的应用程序可以执行的 所有可能的操作 而工具栏 通常只是一些子集作为方便之用 由于这是一个创建某物的动作 我们将把它放在一个熟悉的地方 使用CommandGroup 我们将把它放在File菜单中的 newItem之前

对于我的浇水操作 我想将它放在一个 名为“植物”的 新CommandMenu中 这将出现在我们应用程序的 视图菜单旁边

这些视图只包含 改变花园的按钮 和修饰符来定义按钮行为 我们有多个窗口 但只有一个菜单栏 我不想在我的花坛里放胡萝卜 所以菜单怎么知道要把动作 发送到哪个花园？ 回到GardenDetail视图 我将把focusedSceneValue 修饰符添加到表中 传入我的关键路径和绑定 我会为选择做同样的事情

这告诉系统当整个场景都处于焦点时 为给定的关键路径公开这些值 最后 在GardenApp文件中 我们需要添加我们的新命令 在我们之前添加的 SidebarCommands()之后 然后SwiftUI 就会知道将它们添加到主菜单中 我现在可以在花园里 主菜单最前面的 窗口中种一株植物了 我还可以选择需要标记为浇水的植物 并从植物菜单中选择

为应用程序的所有操作添加菜单 可提高应用程序的灵活性 通过启用键盘快捷键 并提供不同的方式 在你的应用程序中完成任务 它还有助于操作的可发现性 使人们能够探索 和发现你的应用程序的功能 说到这个 在第二部分中 你将会添加更多功能 并与杰夫一起为你的应用程序润色 包括强调色 表格之间的拖放 以及如何使用iOS设备拍摄 和附加植物的照片 我们今天已经介绍了很多 我们已经使用SwiftUI从头开始 为Mac应用程序构建了界面 并展示了每个组件 如何有助于打造出色的 Mac应用程序 感谢收看！ ♪