在苹果加速器活动做的 SwiftUI 开发分享-轻识

受 Apple 加速器 SwiftUI 活动邀请，做了个分享，还和喵神、61、浙剑、思琪等社区大神参与了圆桌讨论。这次完善了 SwiftUI 做的幻灯片，比去年要好一点，增加了解释执行代码交互功能。

为这次幻灯画了几张图，在新西兰认识的画家，指导我了些画法，用其完成了幻灯里的图。

macOS 多栏

内容有 macOS 多栏、Toolbar、文件夹嵌套、文本和代码编辑器、网格视图和斜45度视觉。

macOS 的多栏只需要使用 NavigationView 就可以了，闭包里的第一个视图就是 Sidebar，后面的视图可以作为占位视图，显示一些初始信息，通过 Sidebar 的 NavigationLink 来设置第二栏的视图就好了，第三栏通过第二栏来指定。

如果想要隐藏收起 Sidebar 需要先获取 SplitViewController，然后调用 toggleSidebar 方法就可以了。如果想要收起最右侧视图或任意一栏视图，可以在 SplitViewController 的 splitViewItems 里找到对应的 Item，比如最右一栏就是 splitViewItems.last。调用找到视图的 animator().isCollapsed.toggle() 就可以了。

如果只想让其中一栏全屏显示，先在 splitViewItems 找到那一栏，然后调用对应 ViewController 里 View 的 enterFullScreenMode 方法，要注意的是，设置的 Options 需要包含 .autoHideDock 和 .autoHideMenuBar，否则就没法退出全屏了。由于全屏后会将视图放到另一个 Window 中，因此退出全屏可以直接调用当前 key window 的 contentView 的 exitFullScreenMode() 方法。

Toolbar

一般的 macOS 程序多栏顶部会有一些功能按钮，以方便用户了解到程序的主要高频功能，比如 Xcode 的调试和 Target 选择按钮，Keynote 的播放、添加幻灯片、缩放文本、形状、表格、图表等按钮。这些按钮都可以通过 Toolbar 来实现。Toolbar 根据摆放位置和语义设置了一组 Options，通过 Options 统一了多平台的表现形式，比如默认位置的 option 就是 .automatic，中间位置就是 .principal，macOS Touch Bar iOS 的虚拟键盘上的按钮用的就是 .keyboard。另外还有很多语义表示，用于放置到不同平台特定的位置，比如用于导航的按钮在 macOS 上会出现在最左侧，用的就是 .navigation 这种语义的 Options。

文件夹嵌套结构

得益于 keypaths 在 SwiftUI 中的应用，文件夹嵌套结构实现起来简单了太多。给 List 的 children 参数指定嵌套模型的嵌套键值路径即可，比如模型结构如下：

// MARK: - 目录结构数据模型
struct POM:Hashable,Identifiable{
var id = UUID()
var s:String// 文字
var i:String// 图标
varsub:[POM]?
}

其中嵌套键值是 sub，那么 children 参数只需要添上 \.sub ，List 内部会处理嵌套逻辑并展示出来。如果 List 表现出来的效果并不能够满足你，你也可以自己定制视图和交互。比如点击文件夹名字也能够展开子内容，List 默认只有点击左侧箭头才能够展开。

自定义嵌套视图底层可以使用 DisclosureGroup，DisclosureGroup 能够展示自定义视图内容，还有一个 isExpanded 值绑定参数用来显示和隐藏内容。在遍历已展示视图时，通过 keypaths 发现嵌套值不为空时就读取子内容，同时默认 isExpanded 值为 false 就会显示不展开的箭头符号，将文件夹名字做成按钮，点击按钮触发 isExpanded.toggle()，如 isExpanded 为 false 就置为 true，即展开文件夹，反之就会收起文件夹。

文本和代码编辑器

文本和代码编辑器也是 macOS 上很常见的效率工具的核心功能，包含的技术点较多，比如调试和代码分析会用到编译器这里就不展开说了。感兴趣可以参看深入剖析 iOS 编译 Clang / LLVM、深入剖析 iOS 编译 Clang / LLVM 直播的 Slides、atSwift大会上分享《学习iOS编译原理能做哪些有意思的事情》的 Slides、这次swift大会分享准备的幻灯片和 demo，这几篇。

文本或代码分析完后可以通过 Attribute 来进行富文本展示的设置，富文本属性都在 AttributeContainer 中设置，设置好的富文本直接通过 append 进行组合。编辑器其它的比如编辑、重做、存储或自定义的能力可以通过 NSViewRepresentable 来包装 Appkit 直接使用 Appkit 里的 NSTextView 的能力。

Grid

Vision

详细SwiftUI组件的使用示例，请点击“阅读原文”查看。