How do I achieve a complex toolbar layout using SwiftUI, for a macOS target?

Using the new .toolbar modifier, I have successfully created a toolbar for my macOS 11 target.

I have all my buttons laid out within a ToolbarItem, with placement set as .primaryAction.

Code Block
ToolbarItem(placement: .primaryAction) {
    ToolbarButtons()
}

By using the following Label and Spacer() I can hard code a "star" systemImage further to the left of the ToolbarButtons...

Code Block
.toolbar {
ToolbarItem(placement: .primaryAction) {
    HStack {
        Label("Text", systemImage: "star")
        Spacer(minLength: 60)
        ToolbarButtons()
    }
}
}

I can improve the complexity by adding in a separate ToolbarItem with placement set as .navigation...

Code Block
.toolbar {
ToolbarItem(placement: .navigation) {
ToolbarButtonToLeadingEdge()
}
ToolbarItem(placement: .primaryAction) {
    HStack {
        Label("Text", systemImage: "star")
        Spacer(minLength: 60)
        ToolbarButtons()
    }
}
}

...but I still do not have the control over placement that I am hoping for.

So is anyone able to please explain how I achieve the complex layout included in many of Apple's Apps (my example would be Notes), that include separators between the master and detail views, that resize with the window as it resizes?

Replies

Any news on that? Having the same problem.
Wondering the same thing. In particular there doesn't seem to be a way to place items in the toolbar area above a source list on macOS (like in Calendar for example).
I also hope we will see a SwiftUI solution for this problem before the end of the beta