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

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

工具栏API是今年SwiftUI的另一个出色补充。 通常,我们使用工具栏来提供可用的操作。 您还记得导航栏或底部栏之外有按钮的情况吗? 本周,我们将学习有关新工具栏API的所有信息。 在早期版本的SwiftUI中,我们可以使用navigationBarItems修饰符将按钮放置在导航栏中...

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

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

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上,它在屏幕顶部插入一个按钮。 让我们来看看我们使用它的难易程度。

import SwiftUI

struct ContentView: View {
    let messages: [String]

    var body: some View {
        List(messages, id: .self) { message in
            Text(message)
        }
        .navigationTitle("Messages")
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button("New") {}
            }

            ToolbarItem(placement: .bottomBar) {
                Button("Filter") {}
            }
        }
    }
}

如您在上面的示例中所见,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文件篇


一篇文章系列

技术交流

QQ:3365059189
SwiftUI技术交流QQ群:518696470

文章来源于互联网:SwiftUI 2.0 深入理解Toolbar(教程含源码)

0

评论0

鱼翔浅底,鹰击长空,驼走大漠
没有账号? 注册  忘记密码?