SwiftUI中如何修改Picker组件的字体样式？

你遇到的问题是因为默认样式的Picker（Compact样式）会忽略内部Text的字体设置，弹出菜单的文字样式由系统默认控制。以下是两种可行的解决方案：

方法1：使用Inline样式的Picker #

这种方式会让选项直接显示在界面上，字体设置可以直接生效，适合需要直接展示选项的场景。

修改后的代码示例：

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(spacing: 20) {
                HStack{
                    Text("N:")
                        .font(Font.title2.weight(.heavy))
                    Picker("Level (n)", selection: $selectedLevel) {
                        ForEach(levels, id: \.self) {
                            Text($0)
                                .font(Font.title2.weight(.heavy))
                        }
                    }
                    .pickerStyle(.inline) // 设置为Inline样式
                    .frame(width: 100) // 调整宽度适配字体
                }
                
                HStack{
                    Text("Lives:")
                        .font(Font.title2.weight(.heavy))
                    Picker("Lives", selection: $selectedLife) {
                        ForEach(lives, id: \.self) {
                            Text($0)
                                .font(Font.title2.weight(.heavy))
                        }
                    }
                    .pickerStyle(.inline)
                    .frame(width: 100)
                }
                
                HStack{
                    Text("Letters:")
                        .font(Font.title2.weight(.heavy))
                    Picker("Letter display", selection: $selectedLetterMethod) {
                        ForEach(letters, id: \.self) {
                            Text($0)
                                .font(Font.title2.weight(.heavy))
                        }
                    }
                    .pickerStyle(.inline)
                    .frame(width: 150)
                }
            }
        }
    }
}

方法2：自定义弹出菜单样式（保留点击弹出交互） #

如果需要保留点击弹出菜单的交互，同时自定义菜单内的字体，可以用Menu组件结合Picker实现：

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(spacing: 20) {
                HStack{
                    Text("N:")
                        .font(Font.title2.weight(.heavy))
                    Menu(selectedLevel) {
                        Picker("Level (n)", selection: $selectedLevel) {
                            ForEach(levels, id: \.self) { level in
                                Text(level)
                                    .font(Font.title2.weight(.heavy))
                            }
                        }
                    }
                    .font(Font.title2.weight(.heavy)) // 设置菜单按钮字体
                }
                
                HStack{
                    Text("Lives:")
                        .font(Font.title2.weight(.heavy))
                    Menu(selectedLife) {
                        Picker("Lives", selection: $selectedLife) {
                            ForEach(lives, id: \.self) { life in
                                Text(life)
                                    .font(Font.title2.weight(.heavy))
                            }
                        }
                    }
                    .font(Font.title2.weight(.heavy))
                }
                
                HStack{
                    Text("Letters:")
                        .font(Font.title2.weight(.heavy))
                    Menu(selectedLetterMethod) {
                        Picker("Letter display", selection: $selectedLetterMethod) {
                            ForEach(letters, id: \.self) { method in
                                Text(method)
                                    .font(Font.title2.weight(.heavy))
                            }
                        }
                    }
                    .font(Font.title2.weight(.heavy))
                }
            }
        }
    }
}

补充说明 #

如果需要滚轮样式的Picker（表单中常见的类型），可以设置.pickerStyle(.wheel)，同时给内部Text设置字体，并添加.frame(height: 150)确保Picker有足够高度显示大字体。

内容的提问来源于stack exchange，提问作者Bomboletto