SwiftUI Picker with EmptyView still presents empty space

Question

I have a Picker within a Form. I don't want to show any label on this Picker, so I set the label to EmptyView(). Though, the UI still presents an empty space where the label would be. I'm looking for a way to remove this space.

var body: some View {
        NavigationView{
            Form {
...                
                Section(header: Text("Emails")){
                    HStack{
                        Picker(selection: $phoneType, label: EmptyView()){
                            ForEach(phoneTypes, id: \.self){
                                Text($0)
                            }
                        }
                        .pickerStyle(.navigationLink)
                        Spacer()
                        Link("[email protected]", destination: URL(string: "mailto:[email protected]")!)
                    }
                    Button("Add Email") {}
                }
...   
            }
        }
        .navigationTitle("John Doe")
    }

@LudovicC You need to add the navigationTitle view modifier to your Form, not on NavigationView. — Nirav D
– Nirav D, Commented Jan 3, 2023 at 13:26

Nirav D · Accepted Answer · 2023-01-03 13:07:15Z

1

The correct approach is to use labelsHidden() to hide the label of Picker.

Picker(selection: $phoneType, label: EmptyView()){
    ForEach(phoneTypes, id: \.self){
        Text($0)
    }
}
.labelsHidden()
.pickerStyle(.navigationLink)

answered Jan 3, 2023 at 13:07

Nirav D

72.6k12 gold badges168 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ChrisR · Accepted Answer · 2023-01-03 12:31:17Z

0

A possible workaround is using Picker inside Menu:

                    HStack{
                        Menu {
                            Picker("", selection: $phoneType){
                                ForEach(["Work","Home","Cell"], id: \.self){ type in
                                    Button(type) { phoneType = type }
                                }
                            }
                        } label: {
                            Text(phoneType).foregroundColor(.secondary)
                        }
                        
                        Spacer()
                        Link("[email protected]", destination: URL(string: "mailto:[email protected]")!)
                    }

answered Jan 3, 2023 at 12:31

ChrisR

12.5k1 gold badge19 silver badges40 bronze badges

Comments

Omar HossamEldin · Accepted Answer · 2023-01-03 12:59:47Z

Put the Text in the loop inside an HStack and add a trailing Spacer

var body: some View {
    NavigationView{
        Form {
...                
            Section(header: Text("Emails")){
                HStack{
                    Picker(selection: $phoneType, label: EmptyView()){
                        ForEach(phoneTypes, id: \.self){ t in
                            HStack {
                                Text(t)
                                Spacer()
                            }
                        }
                    }
                    .pickerStyle(.navigationLink)
                    Spacer()
                    Link("[email protected]", destination: URL(string: "mailto:[email protected]")!)
                }
                Button("Add Email") {}
            }
...   
        }
    }
    .navigationTitle("John Doe")
}

Collectives™ on Stack Overflow

SwiftUI Picker with EmptyView still presents empty space

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related