SwiftUI 2.0 深入理解Toolbar(教程含源码)

工具栏API是今年SwiftUI的另一个出色补充。通常，我们使用工具栏来提供可用的操作。您还记得导航栏或底部栏之外有按钮的情况吗？本周，我们将学习有关新工具栏API的所有信息。

在早期版本的SwiftUI中，我们可以使用navigationBarItems修饰符将按钮放置在导航栏中。让我们快速看一下它是如何工作的。

1
2
3
4
5
6
7
8
9
10
11
12
13

import SwiftUI

struct ContentView: View {
let messages: [String]

var body: some View {
List(messages, id: \.self) { message in
Text(message)
}
.navigationTitle("Messages")
.navigationBarItems(trailing: EditButton())
}
}

上面的示例看起来不错，但是有一个大问题。它仅适用于导航栏。例如，watchOS应用程序使用NavigationView提供导航堆栈，但是没有导航栏可交付操作。我们必须在watchOS上使用3D触摸菜单，但是随后我们面临另一个问题。 SwitUI没有向我们提供使用3D触摸菜单的API。

幸运的是，Apple发布了可在所有Apple平台上使用的统一工具栏API。工具栏API是声明性API的另一个示例，该API适应环境并在不同设备上看起来有所不同。例如，它在iOS上使用导航栏，但在watchOS上，它在屏幕顶部插入一个按钮。让我们来看看我们使用它的难易程度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如您在上面的示例中所见，SwiftUI为我们提供了工具栏修饰符，可用于构建工具栏项。工具栏修改器接受ToolbarContentBuilder闭包，该闭包与ViewBuilder函数构建器非常相似，但是它使用ToolbarItems代替视图。

我们使用ToolbarItem结构来声明一个动作。 ToolbarItem具有两个必需的参数。第一个是放置，它是ToolbarItemPlacement结构的实例。第二个是ViewBuilder闭包，SwiftUI使用该闭包来构建动作的视图表示。

SwiftUI将工具栏的所有魔力隐藏在ToolbarItemPlacement结构后面。 SwiftUI可以根据放置参数的值将工具栏项目放置在不同的位置。有很多安置机会。让我们谈谈基本选项。

自动-该项目放置在默认部分中，具体取决于当前平台。
primaryAction-该项目表示主要动作。通常，SwiftUI将此项目放置在iOS上的导航栏中或watchOS上其他视图的顶部。
我们只能在模式视图显示的工具栏中使用某些放置选项。

Confirmation Action-该项目表示模式界面的确认操作。您可以在工作表中使用它来确认保存操作。
cancelAction-该项表示模式界面的取消操作。
destructiveAction-该项目表示模式界面的破坏性动作。您可以在删除某些数据的模式屏幕中使用它。
还有许多平台特定的放置选项。

bottomBar-该项目放置在底部工具栏中。仅在iOS上可用。
navigationBarLeading-该项放置在导航栏的开头区域。仅在iOS和macOS上可用。
navigationBarTrailing-该项放置在导航栏的尾部区域。仅在iOS和macOS上可用。

推荐

基础文章推荐

经典教程推荐

上新

技术源码推荐

推荐文章

CoreData篇

Combine篇

TextField篇

JSON文件篇

一篇文章系列

技术交流