How do you make a resizable segmented control in SwiftUI for macOS?

Question

Created Mar ’26

Replies 1

Boosts 0

Participants 1

In SwiftUI for macOS, how do I configure a Picker as a segmented control to have a flexible width? This design pattern is present in Xcode 26 at the top of the sidebar and inspector panel.

I can't figure out the combination of view modifiers to achieve a similar look.

import SwiftUI

struct ContentView: View {
  @State private var selection = 0
  
  var body: some View {
    VStack {
      
      Picker("", selection: $selection) {
        Image(systemName: "doc")
        Image(systemName: "folder")
        Image(systemName: "gear")
        Image(systemName: "globe")
          .frame(maxWidth: .infinity) // Doesn't do anything.
      }
      .labelsHidden()
      .pickerStyle(.segmented)
      .frame(maxWidth: .infinity) // Doesn't affect segment sizes.
      
      Spacer()
    }
  }
}

I want the entire Picker to fill the width and for each segment to be of equal widths. How?

In AppKit I would use AutoLayout for the flexible width and NSSegmentedControl.segmentDistribution for the segment widths. Is there a SwiftUI equivalent?

macOS 26 / Xcode 26.3

Answer 1

kennyc OP

8h

Hoping to try and boost this now that macOS 27 Beta 1 is out.

Xcode 27 uses segmented controls in the sidebar and inspector panels as their tabs. These segmented control have a glass effect applied to them and they stretch to fill the width of their respective container views.

How do you actually create such a control?

In macOS 27, using SwiftUI I can create a segmented control that has the glass effect but I cannot get it to "stretch to fill" the width. This is using .pickerStyle(.tabs), which isn't actually the same look as Xcode's but at least has some glass attributes.

Using AppKit I can get the "stretch to fill" behaviour, but I cannot figure out how to get the glass effect.

TL;DR: How do you make a segmented control like the on in Xcode 27's sidebar and inspector panel under macOS 27?