Picker in Form Leaves Leading Space in SwiftUI

Question

I am trying to display PickerView in WheelStyle inside form. It's working fine but there is some leading space that I would like to review.

Here is my code.

struct FormTest: View {
    
    var aryStrings = ["Male","Female"]
    
    @State var selected:String = ""
        
    var body: some View {
        Form {
            Section {
                VStack {
                    HStack {
                        Text("Gender")
                        Spacer()
                    }.padding()
                    
                    HStack {
                        Picker(selection: self.$selected, label: Text("")) {
                            ForEach(self.aryStrings, id:\.self) { value in
                                Text(value)
                            }
                        }.pickerStyle(WheelPickerStyle())
                    }
                }.listRowInsets(EdgeInsets())
            }
        }
    }
} 

Here as we can see there is a leading space which is marked as red. I want that to be full size picker.

Any help will be appreciated.

Answer 1

I assume you're looking for this (tested with Xcode 11.7 / iOS 13.7)

var body: some View {
    Form {
        Section {
            VStack {
                HStack {
                    Text("Gender")
                    Spacer()
                }.padding()

                Picker(selection: self.$selected, label: Text("")) {
                     ForEach(self.aryStrings, id:\.self) { value in
                          Text(value)
                     }
                }.pickerStyle(WheelPickerStyle())
                .labelsHidden()                    // << main part !!
            }
        }
    }
}

Answer 2

Although its not an issue in iOS 14:

In iOS 13, pickers can not stretch their widths. So you need to do something like this:

HStack {
    Spacer()
    Picker(selection: self.$selected, label: EmptyView()) {
        ForEach(self.aryStrings, id:\.self) { Text($0) }
    }
    .pickerStyle(WheelPickerStyle())
    .fixedSize()
    Spacer()
}

And the result would be like: