I've noticed a layout issue with Picker
when used in a toolbar
. The picker stretches out and fills the available space in the toolbar
, which doesn’t match the appearance of other controls like Menu
. This seems to occur no matter how I apply the ToolbarSpacer
across the toolbar
. This issue only seems to occur to the Picker
. Other views do not have this issue.
My code:
struct ContentView: View {
@State private var selectedOption: Options = .option1
var body: some View {
NavigationStack {
Text("Test")
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Picker("Picker", selection: $selectedOption) {
ForEach(Options.allCases, id: \.self) { option in
Text(option.rawValue).tag(option)
}
}
}
ToolbarItem(placement: .topBarTrailing) {
Menu("Menu") {
ForEach(Options.allCases, id: \.self) { option in
Text(option.rawValue)
}
}
}
}
}
}
enum Options: String, CaseIterable {
case option1, option2, option3
}
}
This is what it currently produces:
How can I resolve this issue without setting a specific width? This seems to be a bug, and I've already sent feedback (FB18071705) weeks ago after beta 1 released, but now we are in beta 2 and there is no fix.
I think this is an impact of Liquid Glass
effect on iOS 26 beta. You can try this approach:
ToolbarItem(placement: .topBarTrailing) {
Picker("Picker", selection: $selectedOption) {
ForEach(Options.allCases, id: \.self) { option in
Text(option.rawValue).tag(option)
}
}
.fixedSize() //<- 👈 here
}