How to Remove Padding/Align Picker Value Left with Hidden Label in SwiftUI?

Question

I'm trying to align my Picker hidden label values left to another TextField in my form (see attached image). What's the best way to remove the 8px padding in the displayed picker value?

import SwiftUI

struct ContactFormView: View {
  
  var countries = ["Malaysia", "Singapore", "Japan"]
  
  @State var name: String = ""
  @State var mobile: String = ""
  @State var mobileCountry: String = "Malaysia"
  
  var body: some View {
    NavigationView {
      Form {
        Section(header: Text("Details")) {
          TextField("Name", text: $name)
            .border(Color.red, width: 1)
          HStack {
            Picker(selection: $mobileCountry, label: EmptyView()) {
              ForEach(countries, id: \.self) {
                Text($0).border(Color.red)
              }
            }
              .scaledToFit()
              .labelsHidden()
              .border(Color.red, width: 1)
            TextField("Mobile", text: $mobile)
              .border(Color.red, width: 1)
          }
        }
      }
      .navigationBarTitle("New contact")
    }
  }
}

Answer 1

Probably your best bet is to use a negative padding on your picker:

Picker(selection: $mobileCountry, label: EmptyView()) {
              ForEach(countries, id: \.self) {
                Text($0).border(Color.red)
              }
            }
              .scaledToFit()
              .labelsHidden()
              .border(Color.red, width: 1)
              .padding(.horizontal, -8)

Loading your code in Xcode 12.5, adding that negative padding aligns the text in the way you want.

Intuitively I would have chosen .padding(.leading, -8) to remove padding for the Picker's leading edge only – but in doing so, the gap between the picker and text field grows larger.

Applying the negative padding to both horizontal values keeps that gap the same for me. But I'd recommend in your code trying both, and seeing which one makes the most sense for you.