简体   繁体   中英

How to change the font of a Picker?

I want to change a font of a Picker to Title2 (eg to.font(Font.title2.weight(.heavy)) ) so it's of a size and type Unfortunately, it doesn't read any font mentions and still display 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)
                    }
                }
            }

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

在此处输入图像描述

在此处输入图像描述

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

在此处输入图像描述

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

Your output would be something like this

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM