How to change the font of a Picker?

Viewed 47

I want to set the font to title2 for the items in the Picker (e.g..font(Font.title2.weight(.heavy))) so it’s of a size and type.

Unfortunately, it doesn’t read any font mentions and still displays super small font.

Here’s my code (I got rid of any of my failed experiments):

struct PlayView: View {
    @State private var selectedLevel = "3"
    let levels = ["1", "2", "3", "4", "5"]
    @State private var selectedLife = "3"
    let lives = ["1", "2", "3", "4", "5"]
    @State private var selectedLetterMethod = "Sound"
    let letters = ["Sound", "Written"]
    @State private var showWelcomeView = false
    
    var body: some View {
        ZStack { 
        VStack() {
            HStack{
                Text("N:")
                    .font(Font.title2.weight(.heavy))
                Picker("Level (n)", selection: $selectedLevel)
                {
                    ForEach(levels, id: \.self) {
                        Text($0)
                            .font(.title2)
                    }
                }
            }
            HStack{
                Text("Lives:")
                    .font(Font.title2.weight(.heavy))
                Picker("Lives", selection: $selectedLife) {
                    ForEach(lives, id: \.self) {
                        Text($0)
                    }
                    
                }
            }
            HStack{
                Text("Letters:")
                    .font(Font.title2.weight(.heavy))
                Picker("Letter display", selection: $selectedLetterMethod) {
                    ForEach(letters, id: \.self) {
                        Text($0)
                    }
                }
            }
1 Answers

If you set your pickerStyle to .wheel it will reflect all the font changes that you set.

As per your code as there is no pickerStyle the default is set to .menu and no font styling will be applied when its .menu.

Attaching a few references to support the explanation

  • When PickerStyle set to .wheel

enter image description here

enter image description here

If you notice I have 2 picker items with different font styles and both are applied properly when .pickerStyle is set to .wheel

The first picker item as blue with a smaller font and the second item has red color with a bigger font.

  • When PickerStyle is set to .menu

if the pickerStyle is set to .menu it shows up like below even with the same font styling

enter image description here

Inorder to apply any font styling you should set your Picker's pickerStyle value to .wheel

Your output would be something like this

enter image description here

Related