SwiftUI工具栏toolbar

在 SwiftUI 中，toolbar 是一个强大的修饰符，主要用于为视图添加工具栏项，包括导航栏按钮、底部工具栏按钮等。通过它，可以为导航栏、底部栏以及其他工具栏提供灵活的功能和布局。

在视图中添加 toolbar 修饰符，在toolbar中添加ToolbarItem定义工具栏中单个内容的组件。

.toolbar {

ToolbarItem(placement: .navigationBarTrailing) {

Button(action: {

print("右侧按钮点击")

}) {

Image(systemName: "gear")

}

}

}

Toolbar和ToolbarItem配合完成工具栏按钮的添加。

值得注意的是，.toolbar 是 SwiftUI 中从 iOS 14 开始引入的更灵活和现代的工具栏配置方式。SwiftUI 中早期版本（iOS 13 引入）的用于设置导航栏按钮的方式为navigationBarItems。

基础用法

NavigationStack {

Text("内容视图")

.navigationTitle("工具栏示例")

.toolbar {

ToolbarItem(placement: .navigationBarLeading) {

Button(action: {

print("左侧按钮点击")

}) {

Image(systemName: "chevron.left")

}

}

ToolbarItem(placement: .navigationBarTrailing) {

Button(action: {

print("右侧按钮点击")

}) {

Image(systemName: "gear")

}

}

}

}

ToolbarItem：定义工具栏中的单个项。

placement 参数：

.navigationBarLeading：导航栏左侧

.navigationBarTrailing：导航栏右侧

多个工具栏按钮

使用多个 ToolbarItem，可以在不同位置添加按钮。

.toolbar {

ToolbarItem(placement: .navigationBarLeading) {

Button("返回") {

print("返回按钮点击")

}

}

ToolbarItem(placement: .navigationBarTrailing) {

Button("设置") {

print("设置按钮点击")

}

}

ToolbarItem(placement: .bottomBar) {

Button("底部按钮") {

print("底部按钮点击")

}

}

}

动态工具栏按钮

可以通过 @State 动态更新工具栏内容。

@State private var isEditing = false

var body: some View {

NavigationStack {

Text("内容视图")

.navigationTitle("工具栏示例")

.toolbar {

ToolbarItemGroup(placement: .navigationBarTrailing) {

if isEditing {

Button("完成") {

isEditing = false

}

} else {

Button("编辑") {

isEditing = true

}

}

}

}

}

}

工具栏分组

使用 ToolbarItemGroup 可以将多个工具栏按钮分组放置在同一位置。

.toolbar {

ToolbarItemGroup(placement: .bottomBar) {

Button(action: {

print("按钮1点击")

}) {

Image(systemName: "star")

}

Button(action: {

print("按钮2点击")

}) {

Image(systemName: "heart")

}

Button(action: {

print("按钮3点击")

}) {

Image(systemName: "bell")

}

}

}

工具栏常用位置 (ToolbarItemPlacement)

ToolbarItemPlacement 是一个枚举，定义了工具栏按钮的放置位置：

1、.automatic：自动放置，系统决定最佳位置。

2、.navigationBarLeading：放置在导航栏左侧。

3、.navigationBarTrailing：放置在导航栏右侧。

4、.bottomBar：放置在底部工具栏。

5、.principal：用于设置导航栏中央的内容（通常是自定义标题）。

6、.status：放置在 macOS 状态栏中（仅 macOS）。

复杂场景：自定义导航栏工具

可以结合 ToolbarItemPlacement.principal 创建一个自定义的导航栏工具。

import SwiftUI

struct ContentView: View {

var body: some View {

NavigationStack {

Text("内容视图")

.toolbar {

ToolbarItem(placement: .principal) {

VStack {

Text("标题")

.font(.headline)

Text("子标题")

.font(.subheadline)

}

}

}

}

}

}

#Preview {

ContentView()

}

隐藏工具栏

在 NavigationStack / NavigationView 里，toolbar 是个超级通用的入口。它能控制：

显示/隐藏：

.toolbar(.hidden, for: .navigationBar) // 隐藏

.toolbar(.visible, for: .navigationBar) // 显示

.toolbar(.automatic, for: .navigationBar) // 系统决定

还可以控制显示/隐藏其他区域：

.toolbar(.hidden, for: .tabBar) // 隐藏隐藏tabBar

.toolbar(.hidden, for: .bottomBar) // 隐藏底部工具栏

.toolbar(.hidden, for: .automatic) // 系统决定

还可以通过变量控制导航栏的显示：

struct ContentView: View {

@State private var hideTitle = false

var body: some View {

NavigationStack {

VStack {

Toggle("隐藏标题", isOn: $hideTitle)

.padding()

Text("这是内容区域")

}

.navigationTitle("动态标题")

.toolbar(hideTitle ? .hidden : .visible, for: .navigationBar)

}

}

}

如果只想要隐藏标题，保留导航栏：

.navigationTitle(hideTitle ? "" : "标题")

这会让标题消失，但导航栏还在（工具按钮依然显示）。

总结

1、基础按钮: ToolbarItem 和 ToolbarItemGroup 提供了添加工具栏按钮的能力。

2、位置控制: 使用 ToolbarItemPlacement 确定按钮的位置。

3、动态更新: 借助 @State 或 @Binding 动态更新工具栏内容。

4、自定义内容: 可以在工具栏中放置文本、图片或其他自定义视图。

toolbar 是 SwiftUI 中实现导航栏和工具栏功能的核心工具，灵活性强，适合各种布局需求。

扩展知识

ToolbarItem

ToolbarItem 是 SwiftUI 中用于定义工具栏中单个内容的组件。可以将工具栏中的每个按钮、文本或其他视图包装在一个 ToolbarItem 中，并通过其参数来指定内容的放置位置和行为。

ToolbarItem 的定义

ToolbarItem 是一个泛型视图，常用于 NavigationView 或其他支持工具栏的容器视图中。它接受两个主要参数：

1、placement：定义该项在工具栏中的放置位置。

2、content：定义工具栏中的实际内容。

ToolbarItem(placement: ToolbarItemPlacement, content: () -> View)

placement 参数

placement 指定工具栏项的位置，支持多种常见布局：

常见的 ToolbarItemPlacement 值：

1、navigationBarLeading：导航栏左侧（标题左侧）。

2、navigationBarTrailing：导航栏右侧（标题右侧）。

3、bottomBar：屏幕底部工具栏。

4、principal：标题的主要内容区域。

5、status：状态栏工具项（较少用）。

例如：

.toolbar {

ToolbarItem(placement: .navigationBarLeading) {

Button(action: {

print("Leading button tapped")

}) {

Image(systemName: "arrow.left")

}

}

ToolbarItem(placement: .navigationBarTrailing) {

Button(action: {

print("Trailing button tapped")

}) {

Image(systemName: "gear")

}

}

}

内容（content 参数）

content 定义工具栏项的实际视图，通常是按钮、图标、文本等。例如：

1、按钮作为内容：

ToolbarItem(placement: .navigationBarTrailing) {

Button(action: {

print("Tapped!")

}) {

Image(systemName: "pencil")

}

}

2、文本作为内容：

ToolbarItem(placement: .bottomBar) {

Text("Toolbar Text")

}

3、自定义视图：

可以放置任意视图，例如图标和文本的组合：

ToolbarItem(placement: .navigationBarTrailing) {

HStack {

Image(systemName: "star")

Text("Favorites")

}

}

ToolbarItem 是构建工具栏内容的基本单位，通过 placement 确定位置，通过 content 自定义工具栏项的视图。配合 SwiftUI 的动态和组合特性，可以实现丰富的工具栏布局和交互行为。