how can i get two wheel picker in one row display correctly

How can I get two wheel picker in one row display correctly?I tried to use HStack, but it did not work. see my code below:

import SwiftUI


@available(iOS 15.0, *)
struct ContentView: View {
   
  @State var min:Int = 0
  @State var sec:Int = 0
   
  var body: some View {
    Form{
      Section{
        HStack{
          Picker("min", selection: $min){
            Text("0")
              .tag(0)
            Text("1")
              .tag(1)
            Text("2")
              .tag(2)
            Text("3")
              .tag(3)
             
          }
          .pickerStyle(.wheel)
          Picker("sec", selection: $sec){
            Text("0")
              .tag(0)
            Text("1")
              .tag(1)
            Text("2")
              .tag(2)
            Text("3")
              .tag(3)
             
          }
          .pickerStyle(.wheel)
           
        }
        .frame(height:60)
      }
    }
  }
}

@available(iOS 15.0, *)
struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}
Answered by Claude31 in 690827022

You need to clip the Pickers and use GeometryReader:

struct ContentView: View {
   
  @State var min:Int = 0
  @State var sec:Int = 0
   
    var body: some View {
        Form {
            Section{
                GeometryReader { geometry in
                    HStack{
                        Picker("min", selection: $min){
                            Text("0")
                                .tag(0)
                            Text("1")
                                .tag(1)
                            Text("2")
                                .tag(2)
                            Text("3")
                                .tag(3)
                            
                        }
                        .pickerStyle(.wheel)
                        .frame(width: geometry.size.width / 2, height: 80)
                        .clipped()
                        
                        Picker("sec", selection: $sec){
                            Text("0")
                                .tag(0)
                            Text("1")
                                .tag(1)
                            Text("2")
                                .tag(2)
                            Text("3")
                                .tag(3)
                            
                        }
                        .pickerStyle(.wheel)
                        .frame(width: geometry.size.width / 2, height: 80)
                        .clipped()
                        
                    }
                    .frame(height:60)
                }
            }
        }
    }
}
Accepted Answer

You need to clip the Pickers and use GeometryReader:

struct ContentView: View {
   
  @State var min:Int = 0
  @State var sec:Int = 0
   
    var body: some View {
        Form {
            Section{
                GeometryReader { geometry in
                    HStack{
                        Picker("min", selection: $min){
                            Text("0")
                                .tag(0)
                            Text("1")
                                .tag(1)
                            Text("2")
                                .tag(2)
                            Text("3")
                                .tag(3)
                            
                        }
                        .pickerStyle(.wheel)
                        .frame(width: geometry.size.width / 2, height: 80)
                        .clipped()
                        
                        Picker("sec", selection: $sec){
                            Text("0")
                                .tag(0)
                            Text("1")
                                .tag(1)
                            Text("2")
                                .tag(2)
                            Text("3")
                                .tag(3)
                            
                        }
                        .pickerStyle(.wheel)
                        .frame(width: geometry.size.width / 2, height: 80)
                        .clipped()
                        
                    }
                    .frame(height:60)
                }
            }
        }
    }
}
how can i get two wheel picker in one row display correctly
 
 
Q