swiftuiios26

Pickers in toolbar expand its width. How do I make it compact?


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:

1

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.


Solution

  • 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
    }