In SwiftUI Picker expands to occupy entire space inside a HStack

Question

I have a Text and Picker in HStack separated by Spacer. What I want is that the Spacer should should occupy maximum space between picker and text so that the Text and Picker are not the extreme ends of the HStack but, the picker expands to occupy maximum space. Any clue as to how can this can achieved and that the size of Picker is equivalent to its content?

HStack() {
                Text(template.name)
                    .multilineTextAlignment(.leading)
                Spacer()
                if template.oneItemOnly == "1" {
                    if let items = template.items {
                        Picker(selection: $selectedSegment, label:Text("")){
                            ForEach( 0..<items.count) { index in
                                Text(items[index].name)
                                    .tag(index)
                            }
                        }
                        .pickerStyle(SegmentedPickerStyle())
                    }
                }
            }

pawello2222 · Answer 1 · 2020-07-22T19:03:05.827

3

You can set max width of Spacer by adding a .frame modifier:

Spacer().frame(maxWidth: .infinity)

Alternatively you can try using GeometryReader to set the width of the Picker relative to the screen width:

GeometryReader { proxy in
    ...
    Picker(selection: $selectedSegment, label: EmptyView()) {
        ...
    }
    .frame(width: proxy.size.width / 3)
}

You may also try to implement your own Picker like presented here: Custom Segmented Picker

edited Jul 22 '20 at 19:03

answered Jul 22 '20 at 18:09

pawello2222

46,897
22
145
209

This causes the Spacer and Picker to occupy equal width. – Rakesh.P Jul 22 '20 at 18:21
@Rakesh.P You may try using `GeometryReader` in this case. – pawello2222 Jul 22 '20 at 18:39

In SwiftUI Picker expands to occupy entire space inside a HStack

1 Answers1