swiftui - 如何使用 SwiftUI Toolbar Item Group？

Question

我显然不了解SwiftUI定义语法的含义，因为我无法弄清楚如何使用ToolbarItemGroup。
我可以使用以下工具栏项定义工具栏:

.toolbar {
            
            ToolbarItem {
                Button("200%", action: zoom200).foregroundColor(controller.scale == 2.0 ? selectedButtonColor : defaultButtonColor)
            }
            ToolbarItem {
                Button("100%", action: zoom100).foregroundColor(controller.scale == 1.0 ? selectedButtonColor : defaultButtonColor)
            }
}

但是一直无法使ToolbarItemGroup正常工作。从逻辑上讲，我期望这样的事情:

.toolbar {
   ToolbarItemGroup {
            
         ToolbarItem {
                Button("200%", action: zoom200).foregroundColor(controller.scale == 2.0 ? selectedButtonColor : defaultButtonColor)
            }
         ToolbarItem {
                Button("100%", action: zoom100).foregroundColor(controller.scale == 1.0 ? selectedButtonColor : defaultButtonColor)
            }
   }
   ToolbarItemGroup {
         ToolbarItem {
                Button("Open", action: open)
            }
         ToolbarItem {
                Button("Close", action: close)
            }
   }
}

Answer 1

ToolbarItemGroup 是输出实体，而不是输入 - 从以下 toolbar 构建器中可以清楚地看出:

/// Populates the toolbar or navigation bar with the specified items.
///
/// - Parameter items: The items representing the content of the toolbar.
public func toolbar<Items>(@ToolbarContentBuilder<Void> items: () -> ToolbarItemGroup<Void, Items>) -> some View


/// Populates the toolbar or navigation bar with the specified items,
/// allowing for user customization.
///
/// - Parameters:
///   - id: A unique identifier for this toolbar.
///   - items: The items representing the content of the toolbar.
public func toolbar<Items>(id: String, @ToolbarContentBuilder<String> items: () -> ToolbarItemGroup<String, Items>) -> some View

因此， .toolbar 根据工具栏项目的放置(按预定义的顺序)自动生成组。
这是示例(使用 Xcode 12b/iOS 14 测试)

.toolbar {
    ToolbarItem(placement: .primaryAction) {
        Button(action: {}) { Image(systemName: "book") }
    }
    ToolbarItem(placement: .primaryAction) {
        Button(action: {}) { Image(systemName: "gear") }
    }
    ToolbarItem(placement: .principal) {
        Button(action: {}) { Image(systemName: "car") }
    }
    ToolbarItem(placement: .principal) {
        Button(action: {}) { Image(systemName: "gear") }
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) { Image(systemName: "1.square") }
    }
    ToolbarItem(placement: .bottomBar) {
        Button(action: {}) { Image(systemName: "2.square") }
    }
}