iPad 上的 SwiftUI：整理您的界面

巧用功能强大的 SwiftUI 列表和表格，使您的 iPad App 告别平凡单调的界面。我们将介绍如何添加选择交互和情景菜单，并帮助您 App 的用户提高效率。我们还将为您提供导航结构设计的最佳实践，探索如何通过分屏浏览避免窗口层叠，从而打造一流的桌面级 iPad 体验。该系列讲座包含两个部分，这是第一个讲座。为能更好地理解此视频，我们建议您先对 SwiftUI 进行一些基本了解。在观看此讲座后，请继续观看“iPad 上的 SwiftUI：添加工具栏、标题及更多功能”，一起来了解如何利用 SwiftUI 来进一步优化 iPad App 的工具栏。

资源

相关视频

WWDC22

WWDC21

下载

♪ ♪

大家好欢迎收看 “SwiftUI on iPad: Organize your interface” 我是 Raj 从事 SwiftUI 工作 iPadOS 16 有许多更新可以构建更高效更专业功能更丰富的 App 在本次讲座中我将讨论其中的部分更新并讨论如何组织 SwiftUI app的界面使其在 iPad 上大放异彩首先我将带你浏览列表和表格然后我将讨论 SwiftUI 选择模型以及如何将选择与菜单集成最后我将讨论如何使用分屏浏览来构建 iPad app 的导航但请等等还有更多这实际上是两部分系列的第一部分在第二部分我的同事 Harry 将带你浏览工具栏标题等 Harry 介绍了一些非常重要的新增功能这些功能将 SwiftUI iPad app 提升到了一个新的水平因此请务必观看这两个讲座我们先从列表和表格开始我最近加入了几个读书俱乐部但我的进展很慢很难找到一个安静的地方看书因此为了帮助我专注于阅读我开始开发一个 App 来寻找这些神秘的安静之地安静的地方就像阅读的绿洲只有沙沙的翻书声这个 App 可以帮助我跟踪所有安静的地方我已经为 iPhone 构建了这款 App 但我认为为 iPad 更新这款 App 会是一个有趣的练习因为这样可以充分利用更大的屏幕通过让这款 App 更好地适用于 iPad 当我最终将其安装到 Mac 上时还会做进一步的改进我不会在本讲座中明确介绍 Mac 但所示的许多 API 也适用于 macOS 这是到目前为止我发现的所有安静地方的清单这份列表是更新 App 的一个很好的起点我已经开始研究 iPad 版本了这并不可怕但这并没有利用较大的屏幕这有点浪费空间信息密度也很低幸运的是在 iPadOS 16 中有一个很好的解决方案适用于这些信息密集场景类型多列表我来让你们看看它是什么样子的这是为多列表采用 SwiftUI API 后 “All Places”界面的视图效果在接下来的几分钟内我将逐步完成这个截图 SwiftUI 中的多列表格最早是在 macOS Monterey 中引入的从 iPadOS 16 开始同样的表 API 现在也可以用于 iPad 像在 Mac 上一样 iPad 上的表格支持多列和排序伴随着 iPad 上表格的引入 SwiftUI 现在在 iPad 和 Mac 上支持表格分段

上一个讲座 “SwiftUI on the Mac: Build the fundamentals”中关于表格的一般指导仍然适用于 iPad 所以如果你还没有看过该讲座我建议你去看看

我们从 iPhone 列表开始建立之前显示的表格这是前面的位置列表的代码

首先我将从列表切换到表格表格和列表的构造函数是不同的表格接受列生成器而不是视图生成器

我添加的第一列是地名该列需要一个标题名称和一个视图生成器来为集合中的每个元素生成视图我还指定了一个关键路径这在以后向表中添加排序时很重要请注意视图生成器与基于列表的构造非常相似事实上我甚至可以重复使用之前的 PlaceCell 类型

在紧凑尺寸类中表格只显示它们的第一列这意味着我的列表在 iPhone 上和在 iPad 上侧拉时看起来仍然很棒

你可能会注意到它在外观上与列表有些相似但我并没有仅仅用列表替换表格因为重用表格允许在尺寸类型之间转换时保留滚动位置和选择一般而言确保使用第一栏以获得紧凑型外观并始终确保在各种环境中测试 iPad app 比如侧拉

好的我们继续我将为舒适度和噪声级别添加列对于只包含文本内容的列 TableColumn 提供了一个方便的 API 允许我在值指向字符串时省略视图生成器在这种情况下我知道舒适度不需要很大的空间所以我采用了固定宽度

我还可以使用比较器将排序添加到表格中我将创建一些状态来存储比较器这里的状态是一个数组因为它代表表格的所有比较器并且将初始值设置为名称比较器可以让表格在第一次显示时显示排序的结果

接下来将状态绑定传递到表格中以便将所有内容连接起来

因为每个列都将其值指定为可比较字段的关键路径所以默认情况下它们是可排序的现在这个表格完全可以按名称舒适度和噪声进行排序请注意表格本身并不处理排序这取决于我当排序顺序改变时我可以使用 onChange 修饰器对数据进行排序

好的我们来试一试吧

这个表格看起来很棒显示了所有位置数据真正利用了大屏幕的优势与 Mac 不同 iPad 上的表格不会水平滚动所以限制列数很重要这确保了所有列都可以同时显示每列在头部显示标签点击标签对该列进行排序我甚至可以按噪声等级分类

在侧拉功能中表格折叠成一列以更简洁的格式表示所有信息现在我已经将列表更新为一个表格我们开始选择吧在本节中我将回顾 SwiftUI 选择模型并讨论如何将选择与菜单集成在此过程中我将为位置表格增加丰富的功能但首先我要谈谈 SwiftUI 中的选择是如何工作的 SwiftUI 包括一个强大的 API 用于管理列表和表格选择这是一个图解里面的列表有多行每一行都有一个标签这些标签是每一行的唯一值用于帮助列表管理所选内容在这张图表中标签以绿色圆圈显示

除了标签还有一些状态保留的选择这是保存标签值的类型例如对于多个选择这是一个集合用于保存每个选定行的标签列表的任务是协调每行中的标签和选择状态它通过选择绑定来完成这一步所以当一行被选中时比如这里的第二行列表通过选择绑定将它添加到集合中同样如果 App 的其他部分以编程方式更改了集合例如添加三个如图所示则列表会选择它因为选择绑定会更改这个通用模型在 iOS 和 macOS 上都是一样的所以有两部分需要选择标签和状态接下来我想说一下标签从何而来标签只是可选容器中视图的一个值用于跟踪该视图是否被选中在很多情况下 SwiftUI 可以为你自动合成标签标签类似于标识符但不完全相同使用 ForEach 时 SwiftUI 将自动从视图的显式标识符派生出该视图的标签而且表格会使用其行值的标识符作为选择标签在位置 App 中这意味着将使用位置结构的标识符类型有关显示标识的更多信息请查看 “Demystify SwiftUI”

要手动为视图做标签请使用 tag 修饰器这就是 ForEach 在内部所做的工作 tag 修饰器采用哈希值但在使用标签修改器时一定要注意可选择容器中的所有视图都共享相同的标签类型这一点很重要否则 SwiftUI 可能不知道如何选择视图请注意如果使用 ID 修饰器它不会设置标签以上就是标签的介绍让我们再来回顾一下之前的图解

现在我已经解释了这张图解的标签部分我想重点介绍选择等式的另一边选择状态在上一个示例中我使用了一个集合但也有其他选项

你可以使用这些数据结构代表选择 SwiftUI 支持单选 macOS Ventura 中新增的 macOS 侧边栏的必选项以及多选项

iPadOS 16 还引入了轻量级多选现在有了键盘连接你不需要进入编辑模式选择多行这有助于避免模态视图使用键盘时你可以使用 shift 和 command 等常用快捷键来扩展和修改选择这与指针配合使用时效果很好这是采用选择后位置表格的样子在本例中我连接了一个键盘和触摸板因此行不会缩进但它们仍处于选中状态然而当使用触摸功能时我仍然需要进入编辑模式使用双指平移可以加快编辑速度 SwiftUI 自动支持这种手势说到编辑模式也有一些单选和编辑模式的更新当选择单行时 iPhone 和 iPad 上的列表选择不再需要编辑模式这对于协调更新的导航 API 非常有用

通过所有这些更新我们会得到这个表格它是在前一个表的基础上增加了一个编辑模式的新列只有在没有键盘的情况下使用多重选择时才需要编辑模式因此我将更新位置表格以支持选择我可以通过添加一些状态来存储所选内容从而轻松地将所选内容添加到位置表格中创建状态后我会向表格的初始值设定项传递一个绑定表格强制其选择类型与其行标识符匹配因此我使用了位置 ID 类型作为选择类型因为我想要多个选择所以我使用了一个集合作为选择状态表格会自动为每行做标签所以我不需要自己做任何标签

现在我可以选择表格中的行了但我还没有对选中的行做任何事情我想最好能添加一个按钮让我可以将选定的地点添加到指南中以便与读书俱乐部中的其他人共享这是添加工具栏按钮的代码如果有非空选择按钮现在就会显示我还添加了一个编辑按钮它补充了现有的轻量级选择支持但在没有键盘的时候它提供了一种进入和退出编辑模式的功能一款出色的 iPad app 无论有无键盘都会大放异彩因此提供进入和退出编辑模式的控件非常重要

我们来看看现在当我们选择行时会显示一个按钮以及一个进入和退出编辑模式的按钮有关工具栏的更多信息请务必观看本讲座的第二部分我对这里的工具栏按钮很满意但我们可以做得更多对于选择操作尽可能让它们容易访问是个很好的做法这就是为什么在 iOS16 iPadOS16 和 macOSVentura 中 SwiftUI 增加了对多选快捷菜单的支持多选快捷菜单允许在一组选定的标识符上显示一个快捷菜单让我们研究一下这张表格的结构以了解更多

基于项目的快捷菜单有三种变体首先你可以在多个项目上显示菜单例如顶部的选择

你还可以在单个项目上显示快捷菜单

最后你可以在没有内容的空白区域显示快捷菜单

让我们将这种支持添加到我们的位置表格中

我省略了前面代码示例中的一些细节这样我们就可以专注于快捷菜单我添加了新的 contextMenu 修饰器该修饰器采用选择类型这需要匹配列表或表格的选择类型由于我使用的是表格我将使用位置 ID 类型

闭包被传递给一组要操作的项所以若它是空的我就知道菜单是针对空区域的我认为一个添加新位置的按钮对于空白区域来说非常有用这样当我在旅途中找到一个新的安静的地方阅读时我可以快速添加它请注意如果空项目集的视图生成器无法解析为视图 SwiftUI 将不会在空白区域显示菜单接下来我们来处理单个选择如果该集合只有一个单项我就知道菜单显示的是单个位置对于单选和多选我希望能够将这些位置添加到指南中因此我将向菜单中添加另一个视图我们来看看进展下面是新的快捷菜单支持点击空白区域会显示一个添加新位置的菜单项选择一行仅显示该行的快捷菜单我可以用键盘扩展选择创建这个蓝色高亮区域然后我可以在多行上激活快捷菜单轻松地将位置添加到指南中

这个表格现在看起来很时髦是时候在它周围添加一些结构了为此我需要一个分屏浏览导航是 iPad 体验的基础部分分屏浏览是一个避免在 iPad 更大的显示屏上出现模态的好方法它可以一次显示更多信息无需反复在本节中我将介绍 SwiftUI 在导航和分屏浏览方面的一些更新在前面的部分中我创建了位置表格并增加了丰富的功能比如选择和编辑模式但我认为位置 App 缺乏一些结构所以在本讲座中我将利用导航分屏浏览来构建我们 App 结构的基础 SwiftUI 是 iPadOS 16 和 macOS Ventura 中的新功能它改进了对 NavigationSplitView 类型的分屏浏览的支持 SwiftUI 支持两列或三列分屏浏览并具有多种样式可对各列的显示方式进行复杂控制我不会在本期讲座中全面讲述如何呈现导航内容为此我邀请你查看 SwiftUI 导航指南 Curt 有很多秘诀可以拼凑出超棒的导航体验而我将更加专注分屏浏览这张图标显示了 iPad 上的两列分屏浏览在 SwiftUI 前导列被称为侧边列后尾列被称为详细信息列注意这里的列是如何相互平衡的在横向 SwiftUI 默认提供此功能然而在纵向中侧边列会隐藏起来仅显示详细信息列轻触侧栏按钮将显示侧边列该侧边列显示在详细信息列的上方并使其下方变暗

通常当空间受限时两列分频浏览更倾向于仅展示详细信息列因为详细信息列经常比侧边列显示更重要的信息如果你想自定义此行为你可以始终优先选择带有 prominentDetail 导航分屏浏览样式的详细信息列或用平衡的 NavigationSplitView 样式来平衡权重 NavigationSplitView 还支持三列布局有三列时在侧边列和详细信息列中间还有一列称为内容列如果你使用过 UIKit 你或许知道这是补充列在横向显示内容和详细信息列并且可以切换侧边列点击工具栏按钮后详细信息列会滑出为侧边列和内容列腾出空间纵向仅显示详细信息列并点击工具栏按钮显示内容列从那里再次点击会显示侧边列侧边和内容两列都覆盖了详细信息列

一般来说我推荐对三列分屏浏览坚持使用自动样式因为它可以充分利用可用空间并且专门用于更大的显示器就像两列分屏浏览一样三列分屏浏览可以折叠成尺寸紧凑类型的 stack 现在我已经讲述了分屏浏览的基础知识现在是时候在位置 App 中添加一个了这是内容视图我创建了一个 NavigationSplitView 这里有两列第一列是侧边列第二列是详细信息列详细信息列由侧边列的链接填充但如果没有显示任何内容则会显示 select a place 的占位符

这是占位符的屏幕截图非常棒这里使用的是自动样式横向显示侧边列纵向隐藏点击侧边列中的某一行在详细信息列中就会显示该行详情当使用侧拉时列会自动折叠这只是冰山一角这里还有很多令人兴奋的导航添加功能包括对状态恢复的更好的支持深度链接甚至更丰富的程式控制我再次建议你检看导航指南讲座

我已在 App 中构建了很棒的 iPad 功能很高兴能找到一些安静的阅读场所希望我能很快赶上读书俱乐部的进度在本期讲座中我已经介绍了如何利用表格进行丰富的数据展示如何管理复杂的选择交互以及如何利用分屏浏览避免模态

请记得查看相关讲座并优化你的 SwiftUI app 充分利用 iPad 的强大功能

谢谢大家 ♪ ♪

3:10 - Places List

struct PlacesList: View {
    @Binding var modelData: ModelData


    var body: some View {
        List(modelData.places) { place in
            PlaceCell(place)
        }
    }
}

3:18 - Places Table

struct PlacesTable: View {
    @Binding var modelData: ModelData     @State private var sortOrder = [KeyPathComparator(\Place.name)]

    var body: some View {
        Table(modelData.places, sortOrder: $sortOrder) {
            TableColumn("Name", value: \.name) { place in
                PlaceCell(place)
            }
            TableColumn("Comfort Level", value: \.comfortDescription).width(200)
            TableColumn("Noise", value: \.noiseLevel) { place in
                NoiseLevelView(level: place.noiseLevel)
            }
        }
        .onChange(of: sortOrder) {
            modelData.sort(using: $0)
        }
    }
}

10:25 - Places Table with selection

struct PlacesTable: View {
    @EnvironmentObject var modelData: ModelData
    @State private var sortOrder = [KeyPathComparator(\Place.name)]
    @State private var selection: Set<Place.ID> = []

    var body: some View {
        Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
            // columns
        }
    }
}

10:26 - Places Table toolbar additions

Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
    ...
}
.toolbar {
    ToolbarItemGroup(placement: .navigationBarTrailing) {
        if !selection.isEmpty {
           AddToGuideButton(selection)
        }
    }

    ToolbarItemGroup(placement: .navigationBarLeading) {
        EditButton()
    }
}

12:34 - Item context menus

// Item context menus

Table(modelData.places, selection: $selection, sortOrder: $sortOrder) {
    ...
}
.contextMenu(forSelectionType: Place.ID.self) { items in
    if items.isEmpty {
        // Empty area
        AddPlaceButton()
    } else {
        if items.count == 1 {
            // Single item
            FavoriteButton(isSet: $modelData.places[items.first!].isFavorite)
        }

        // Single and multiple items
        AddToGuideButton(items)
    }
}

16:55 - Navigation Split View example

// Navigation Split View example

struct ContentView: View {
    var body: some View {
        NavigationSplitView {
            SidebarView()
       } detail: {
            Text("Select a place")
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。