When optimizing for iPhone Duo (and in general) I understand the recommendation is to replace custom More (...) menus with the system overflow menu, otherwise it's possible you can see two (...) buttons or get the custom menu nested inside the system overflow menu. Eek. With the following code, both (+) and (...) are unexpectedly inside one shared Liquid Glass background. How do you separate / add space between them or is this a bug, if so is there a workaround?
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Hello, World")
.toolbar {
ToolbarItem {
Button("Add", systemImage: "plus") { }
}
ToolbarSpacer(.fixed)
ToolbarOverflowMenu {
Button("Settings", systemImage: "gearshape") { }
}
}
}
}
}
Here's my original code that display two separate buttons as expected:
struct ContentView: View {
var body: some View {
NavigationStack {
Text("Hello, World")
.toolbar {
ToolbarItem {
Button("Add", systemImage: "plus") { }
}
ToolbarSpacer(.fixed)
ToolbarItem {
Menu {
Button("Settings", systemImage: "gearshape") { }
} label: {
Label("More", systemImage: "ellipsis")
}
}
}
}
}
}
Why do I care you might ask? When the user turns on filters in my app, a filter toolbar item is shown, and I want the (+) to remain separate from the grouped filter and more buttons. (+) is like the primary action that should stand alone, like it does in the Wallet app.