I clear don't understand the meaning of the definition syntax for SwiftUI because I can't figure out how one would use ToolbarItemGroup.
I can define a toolbar with toolbar items like this:
.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)
}
}
But have been unable to get ToolbarItemGroup to work. Logically I would have expected something like this:
.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)
}
}
}
What is a toolbar? SwiftUI's toolbar modifier allows for placement of views along the top or bottom space of a view. For a toolbar to work properly, it must be embedded in a NavigationView . Here is a view that contains a toolbar with two buttons at the top of the view.
Toolbar items in the bottom bar As we can see in the example, SwiftUI provides the toolbar modifier that we can use to add toolbar items. A ToolbarItem has two required parameters. The first one is the placement and the second one is a closure to build the view that represents our action. Toolbar items in bottom bar.
A control that displays one or more buttons along the bottom edge of your interface.
ToolbarItemGroup is designed to group views in the same toolbar. It removes the need for explicit usage of ToolbarItem, as both conform to ToolbarContent.
e.g.
.toolbar {
ToolbarItemGroup {
Button("200%", action: zoom200)
.foregroundColor(controller.scale == 2.0 ? selectedButtonColor : defaultButtonColor)
Button("100%", action: zoom100)
.foregroundColor(controller.scale == 1.0 ? selectedButtonColor : defaultButtonColor)
}
ToolbarItemGroup(placement: .bottomBar) {
Spacer()
Button("Open", action: open)
Spacer()
Button("Close", action: close)
Spacer()
}
}
It's also the only way I know of to get Spacer
s to work, between toolbar items.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With