SwiftUI Toolbar 合集

Toolbar

在 .toolbar 修饰符的闭包中添加组件即可，结合 NavigationView 的时候，添加的组件默认都在导航栏的右侧排布。

.toolbar {
    Button(action: {
        print("Saved")
    }, label: {
        Text("Save")
    })
    
    Button(action: {
        print("Added")
    }, label: {
        Text("Add")
    })
}

ToolbarItem

ToolbarItem 持有一个将被放置在工具栏中的视图。它的特殊之处在于你可以在工具栏中为视图添加位置。

.toolbar {
    ToolbarItem(placement: .topBarLeading) {
        Button(action: {
            print("Saved")
        }, label: {
            Text("Save")
        })
    }
    
    ToolbarItem(placement: .topBarLeading) {
        Button(action: {
            print("Added")
        }, label: {
            Text("Add")
        })
    }
}

下面看一下 placement 参数的可选值，placement 属于 ToolbarItemPlacement 类型，以下类型针对 iOS, iPadOS, and tvOS等平台。

• automatic：默认的放置位置。系统会根据上下文自动决定最合适的位置。在 iOS 和 tvOS 上，默认放在导航栏的右侧。
• principal：将工具栏项放置在导航栏的中心位置。这通常用于标题或者重要控件的展示（如果使用了 principal，那么之前设置的navigation title就失效了。）。
• navigation：将工具栏项放置在导航栏的左侧位置。如果左侧在 compact 模式下有返回按钮的话，那么将工具栏项放置在 primaryAction 的位置。
• primaryAction：将工具栏项放置在导航栏的右侧位置。
• confirmationAction：将工具栏项放置在导航栏的右侧。专门用于放置确认或完成操作的位置。这通常用于模态视图或表单提交的场景。
• cancellationAction：将工具栏项放置在导航栏的左侧。专门用于放置取消操作的位置。这通常用于模态视图中，提供明显的取消选项。
• destructiveAction：将工具栏项放置在导航栏的右侧。专门用于放置可能导致数据删除或其他重要更改的操作，通常用红色或其他警示颜色标记。
• keyboard：将工具栏项放置在键盘的顶部工具栏上。这适用于输入场景，如文本编辑时提供快捷操作。
• navigationBarLeading：将工具栏项放置在导航栏的左侧。建议用 .topBarLeading 代替。
• navigationBarTrailing：将工具栏项放置在导航栏的右侧。建议用 .topBarTrailing 代替。
• bottomBar：将工具栏项放置在屏幕底部的工具栏中。这适用于那些需要常驻底部、易于访问的操作。

关于 macOS 上具体位置，可查看 SwiftUI macOS place toolbar item to the rightmost position when dispaying a search bar

MainView()
.toolbar {
    ToolbarItem {
        Spacer()
    }
    ToolbarItemGroup(placement: .status) {
        Text("Status")
    }
    ToolbarItemGroup(placement: .principal) {
        Text("Principal")
    }
    ToolbarItemGroup(placement: .primaryAction) {
        Text("Primary")
    }
    ToolbarItemGroup(placement: .keyboard) {
        Text("Keyboard")
    }
    ToolbarItemGroup(placement: .secondaryAction) {
        Text("Secondary")
    }
    ToolbarItem {
        Text("Noplacement")
    }
}
.searchable(text: .constant(""))

ToolbarItemGroup

ToolbarItemGroup 允许我们定义一组位于同一部位的 item，这样可以简化一些代码。

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button(action: {
            print("Saved")
        }, label: {
            Text("Saved")
        })
        
        Button(action: {
            print("Added")
        }, label: {
            Text("Add")
        })
    }
}

ToolbarContent

如果我们要加的 Toolbar item 较多，那么整个代码看起来就非常臃肿了，有的时候有些 Toolbar 是可以复用的，我们可以将 toolbar 修饰符中的内容单独提出来，使用协议 ToolbarContent。

struct HomeToolbar: ToolbarContent {
    var body: some ToolbarContent {
        ToolbarItem(placement: .navigationBarTrailing) {
            Text("Home")
        }
        
        ToolbarItem(placement: .principal) {
            Image(systemName: "bus")
        }
        
        ToolbarItem(placement: .bottomBar) {
            Button("Save") {
                print("Saved")
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

在调用的地方，只需要实例化一个 HomeToolbar 即可。

.toolbar {
    HomeToolbar()
}

ToolbarTitleMenu

toolbarTitleMenu 修饰符允许我们在导航栏的中间部分添加一个 menu 按钮，点击后出现一个下拉菜单。

.toolbar {
    ToolbarTitleMenu {
        Button("Save") {
            print("Saved")
        }
        
        Button(action: {
            print("Added")
        }, label: {
            Text("Add")
        })
    }
}

参考：

1. SwiftUI中Toolbar使用介绍（ToolbarItem, ToolbarItemPlacement, ToolbarItemGroup, ToolbarContent）
2. MacOS 如何在SwiftUI应用的窗口标题栏中添加并图标和自定义布局