The below code is my current picker wheel. My question is: how can I add icons (flags) and align them exactly like this?
@State private var selectedLanguage = "English"
let languages = ["English", "Italiano", "Francais", "Deutsche"]
Picker("Select Language", selection: $selectedLanguage) {
ForEach(languages, id: .self) { language in
Text(language).tag(language)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width: 300, height: 150)
2
Answers
Put
.frame(maxWidth: .infinity)
on each of the texts so they occupy the full width of the wheel. Then put the image as a leading overlay on top of the text.Here is an example where the images are the numbers 0 to 9 with a circle around them, and the texts are the letter "x" repeated n times.
Output:
Try this approach using a dedicated
struct Language
, aHStack
and assuming you have the appropriate
flag images in your
Assets.xcassets
. Works well for me.Note, you can put the
Spacer()
before theText(language.name)
if you prefer, or both before and after. In that case it gives you this: