Displaying Segmented Picker at Intrinsic Size in SwiftUI

Question

In SwiftUI, a Picker of style SegmentedPickerStyle occupies the full width of its enclosing view. How can I instead have it occupy only the width it requires?

Consider this: which is generated by the following code:

struct ContentView: View {
    @State var value = 1
    var body: some View {
        Picker("Value", selection: $value) {
            Text("One").tag(1)
            Text("Two").tag(2)
        }
        .pickerStyle(SegmentedPickerStyle())
        .padding()
    }
}

How can I remove the large margins from the two picker choices, making the picker only as wide as it needs to be? This seems like a very basic question, but the answer eludes me.

score 25 · Accepted Answer · edited Aug 23 '22 at 10:12

25

Use fixed size as shown below

    Picker("Value", selection: $value) {
        Text("One").tag(1)
        Text("Two").tag(2)
    }
    .pickerStyle(SegmentedPickerStyle())
    .fixedSize()                           // << here !!

edited Aug 23 '22 at 10:12

Martijn Pieters

1,048,767
296
4,058
3,343

answered Dec 05 '20 at 05:10

Asperi

228,894
20
464
690

Do you know how can I increase height of Picker? I tried .frame(height: 40) but it doesn't change the height of segmented control – Abrcd18 Jan 12 '22 at 20:34
This worked like magic! Abrcd18, try the .scaleEffect(CGSize(width: CGFloat, height: CGFloat)) modifier on your picker. – codingCartooningCPA Apr 09 '23 at 21:07

Displaying Segmented Picker at Intrinsic Size in SwiftUI

1 Answers1