ToolbarItemGroup 是用于在工具栏中组织多个相关项目的容器。它允许你将多个工具栏项目组合在一起，并统一设置它们的位置和样式。
1. 基本用法 #
NavigationStack {
List {
Text("内容")
}
.toolbar {
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button("编辑") { }
Button("分享") { }
}
}
}
2. 不同位置的使用 #
struct ContentView: View {
var body: some View {
NavigationStack {
List {
Text("内容")
}
.navigationTitle("主页")
.toolbar {
// 1. 导航栏右侧组
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button(action: { }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { }) {
Image(systemName: "ellipsis")
}
}
// 2. 底部工具栏组
ToolbarItemGroup(placement: .bottomBar) {
Button("取消") { }
Spacer()
Button("确定") { }
}
// 3. 键盘工具栏组
ToolbarItemGroup(placement: .keyboard) {
Spacer()
Button("完成") { }
}
}
}
}
}
3. 实际应用示例 #
示例1：编辑界面工具栏 #
struct EditView: View {
@State private var isEditing = false
@State private var showShareSheet = false
var body: some View {
NavigationStack {
List {
Text("编辑内容")
}
.navigationTitle("编辑")
.toolbar {
// 顶部工具栏组
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button(action: { showShareSheet = true }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { isEditing.toggle() }) {
Image(systemName: isEditing ? "checkmark" : "pencil")
}
}
// 底部工具栏组
ToolbarItemGroup(placement: .bottomBar) {
Button(action: { }) {
Image(systemName: "bold")
}
Button(action: { }) {
Image(systemName: "italic")
}
Button(action: { }) {
Image(systemName: "underline")
}
Spacer()
Button(action: { }) {
Image(systemName: "photo")
}
}
}
}
}
}
示例2：键盘工具栏 #
struct MessageView: View {
@State private var text = ""
var body: some View {
NavigationStack {
TextField("输入消息", text: $text)
.textFieldStyle(.roundedBorder)
.padding()
.toolbar {
ToolbarItemGroup(placement: .keyboard) {
Button(action: { }) {
Image(systemName: "photo")
}
Button(action: { }) {
Image(systemName: "camera")
}
Spacer()
Button("发送") { }
}
}
}
}
}
示例3：复杂布局工具栏 #
struct ComplexToolbarView: View {
@State private var selectedColor = Color.blue
var body: some View {
NavigationStack {
List {
Text("内容")
}
.navigationTitle("高级编辑")
.toolbar {
// 顶部左侧工具栏组
ToolbarItemGroup(placement: .navigationBarLeading) {
Button("取消") { }
}
// 顶部右侧工具栏组
ToolbarItemGroup(placement: .navigationBarTrailing) {
Button("保存") { }
}
// 底部工具栏组 - 样式工具
ToolbarItemGroup(placement: .bottomBar) {
Group {
Button(action: { }) {
Image(systemName: "textformat")
}
Button(action: { }) {
Image(systemName: "bold")
}
Button(action: { }) {
Image(systemName: "italic")
}
}
.buttonStyle(.bordered)
Spacer()
// 颜色选择器组
Group {
ColorPicker("", selection: $selectedColor)
Button(action: { }) {
Image(systemName: "photo")
}
}
.buttonStyle(.bordered)
}
}
}
}
}
示例4：自适应工具栏组 #
struct AdaptiveToolbarView: View {
@Environment(\.horizontalSizeClass) private var horizontalSizeClass
var body: some View {
NavigationStack {
List {
Text("内容")
}
.navigationTitle("自适应布局")
.toolbar {
// 根据屏幕大小调整工具栏布局
ToolbarItemGroup(placement: horizontalSizeClass == .compact ? .bottomBar : .navigationBarTrailing) {
Button(action: { }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { }) {
Image(systemName: "heart")
}
Button(action: { }) {
Image(systemName: "message")
}
}
}
}
}
}
示例5：分段工具栏组 #
struct SegmentedToolbarView: View {
@State private var selectedTab = 0
var body: some View {
NavigationStack {
List {
Text("内容")
}
.navigationTitle("分段工具栏")
.toolbar {
// 顶部工具栏组
ToolbarItemGroup(placement: .navigationBarTrailing) {
Picker("选择视图", selection: $selectedTab) {
Image(systemName: "list.bullet").tag(0)
Image(systemName: "square.grid.2x2").tag(1)
}
.pickerStyle(.segmented)
}
// 底部工具栏组
ToolbarItemGroup(placement: .bottomBar) {
ForEach(0..<4) { index in
Button(action: { }) {
Image(systemName: "circle.fill")
}
if index < 3 {
Spacer()
}
}
}
}
}
}
}
4. 使用建议 #
- 合理分组
.toolbar {
// 相关功能放在同一组
ToolbarItemGroup(placement: .bottomBar) {
// 编辑相关
Group {
Button("剪切") { }
Button("复制") { }
Button("粘贴") { }
}
Spacer()
// 格式相关
Group {
Button("字体") { }
Button("颜色") { }
}
}
}
- 布局控制
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
// 使用 Spacer 控制布局
Button("左边") { }
Spacer()
Button("中间") { }
Spacer()
Button("右边") { }
}
}
- 状态管理
@State private var isEditing = false
.toolbar {
ToolbarItemGroup(placement: .navigationBarTrailing) {
// 根据状态显示不同按钮
if isEditing {
Button("完成") { isEditing = false }
} else {
Button("编辑") { isEditing = true }
}
}
}
5. 注意事项 #
避免过度使用
- 保持工具栏简洁
- 只显示最重要的功能
合理分组
- 相关功能放在一起
- 使用适当的间距
适配不同设备
- 考虑不同屏幕大小
- 适当调整布局
可访问性
- 添加适当的标签
- 确保足够的点击区域
性能考虑
- 避免在工具栏中放置复杂视图
- 注意内存使用
通过这些示例和建议，你可以更好地理解和使用 ToolbarItemGroup 来创建组织良好的工具栏界面。