Swiftui: align selected text in picker to leading edge

Question

Currently I've a picker included in a Section included in a Form what I'm trying to reach is to align the selected value of the picker to the leading in both iOS 13 and 14, I've tried many solutions such as labelsHidden() but with no result, kindly find the code sample that generates the following screenshot on iOS 14, any help would be appreciated

struct ContentView: View {
    @State private var selectedStrength = "Mild"
    let strengths = ["Mild", "Medium", "Mature"]

    var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker("", selection: $selectedStrength) {
                        ForEach(strengths, id: \.self) {
                            Text($0)
                        }
                    }
                }
            }
        }
    }
}

Seems to be a problem only when using `Picker` inside a `Form`... — aheze, May 25 '21 at 14:23
@aheze actually I need to go to a separate screen to select some value from the array, that's why the `Form` is necessary in this case — Hesham Ali Kamal, May 25 '21 at 14:40

score 7 · Accepted Answer · answered May 25 '21 at 14:37

Use the Text() with a Spacer() in a HStack()

struct ContentView: View {
    @State private var selectedStrength = "Mild"
    let strengths = ["Mild", "Medium", "Mature"]

    var body: some View {
        NavigationView {
            Form {
                Section {
                    Picker("", selection: $selectedStrength) {
                        ForEach(strengths, id: \.self) { t in
                            HStack {
                                Text(t)
                                Spacer()
                            }
                        }
                    }
                }
            }
        }
    }
}

score 2 · Answer 2 · answered Feb 10 '23 at 00:58

You have to use .frame() and .labelsHidden()

struct ContentView: View {
@State private var selectedStrength = "Mild"
let strengths = ["Mild", "Medium", "Mature"]

var body: some View {
    NavigationView {
        Form {
            Section {
                Picker("", selection: $selectedStrength) {
                    ForEach(strengths, id: \.self) {
                        Text($0)
                    }
                }
                .frame(width: 160, alignment: .leading)
                .labelsHidden()
            }
        }
    }
}

}

tested on IOS 16

Swiftui: align selected text in picker to leading edge

2 Answers2