CODEWITHSUNDEEP
swiftuiswiftui-picker
Edward Brey
Edward Brey

Reputation: 41718

How to increase Picker selection width?

How can I adjust the width of the list displayed when the user taps a picker? Note that I don't need to adjust width of the picker itself - only what is displayed over it.

For example, consider a picker that shows available iPad speech voices:

Picker("Voice", selection: $model.voice) {
    ForEach(AVSpeechSynthesisVoice.speechVoices(), id: \.identifier) { voice in
        Text("\(Locale.current.localizedString(forIdentifier: voice.language) ?? voice.language) – \(voice.name)").tag(voice)
    }
}

If you tap the picker, you see a list that contains the following:

screenshot

Even though the iPad has lots of screen width available, the list presented is so narrow that many of the choices wrap to two lines. How can I adjust the with on this width?

Upvotes: 0

Views: 256

Answers (1)

Jimoh Yusuph
Jimoh Yusuph

Reputation: 1

The code sample should not wrap. Any wrapping should be caused by something else in your code, possibly the parent view has a fixed width like the code shown below.

  VStack{
        ScrollView{
            ForEach(AVSpeechSynthesisVoice.speechVoices(), id: \.identifier) { voice in
               
                    Text("\(Locale.current.localizedString(forIdentifier: voice.language) ?? voice.language) – \(voice.name)").tag(voice)
                       
                        .frame(maxWidth:.infinity, alignment: .leading)
                        .padding(.horizontal)
                        .padding(.top)
                
            }
        }
    }.frame(width: 200)

  • i wrote the same code below without the fixed width.

      VStack{
        ScrollView{
            ForEach(AVSpeechSynthesisVoice.speechVoices(), id: \.identifier) { voice in

                    Text("\(Locale.current.localizedString(forIdentifier: voice.language) ?? voice.language) – \(voice.name)").tag(voice)

                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.horizontal)
                        .padding(.top)

            }
        }
    }

Screen shot from Ipad pro 11 inches, 4th generation

Upvotes: 0

Related Questions