Swift 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()
}

总结

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 的动态和组合特性，可以实现丰富的工具栏布局和交互行为。