Best way to present a long Segmented Picker in Swift UI

Question

I need some suggestions on presenting a segmented picker in Swift UI.

It is to display distinct time ranges (<15min, <30min, <45min) all the way to 120min.

It ends up being 8 segments. I am really not a fan of the scrolling picker as it not in theme what what I am looking for in presentation.

The problem with how it stands now is that the time unit is cut off with each segment showing "15.." and doesn't look clean.

I have put the segmented picker in a horizontal scroll view which looks okay but the user may not know to scroll.

One option I used but can't get to work out is splitting the one long segment into 2 separate views.

The problem is the user can select a segment from either pickers which is not what I want.

What I want is if the user selects one picker, the other one is not selectable or vice versa.

I have been messing with some formatting options, so please ignore that.

Is this possible?

Thanks is advance!

struct ContentView: View {
    
    var body: some View {
    
        VStack{

                To60min()
                To120min()
            
             .foregroundColor(Color.red)
        }
    }}


    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }}
  
struct To60min: View {
    
    @State private var selectedTimeRangeto60 = ""
    @State private var timeRangesTo60 = ["15min", "30min", "45min", "60min"]
    
    var body: some View {
        
        Picker("", selection: $selectedTimeRangeto60) {
            ForEach(timeRangesTo60, id: \.self) {
                Text($0)
                       }
                   }
        .frame(width: .infinity, height: 75)
            .background(.gray)
                   .padding()
                   .pickerStyle(.segmented)
                   .contrast(22.0)
        }
}

struct To120min: View {
    
    @State private var selectedTimeRangeto120 = ""
    @State private var timeRangesTo120 = ["75min", "90min", "105min", "120min"]

    
    var body: some View {
        
        Picker("", selection: $selectedTimeRangeto120) {
            ForEach(timeRangesTo120, id: \.self) {
                Text($0)
            }
        }
        .padding()
        .pickerStyle(.segmented)
        .contrast(22)
    }
}

Answer 1

For anything more than 3-4 items (depending on label length), I would switch from a .segmented to .menu picker style. https://developer.apple.com/documentation/swiftui/pickerstyle