如何修改SwiftUI Picker视图及选项列表的字体？

在iOS16.2、Xcode14.2环境下，直接给SwiftUI Picker或其内部Text添加font修饰符无法修改Picker的显示文本字体，仅通过将Picker包裹在Menu中修改label字体的方式生效，需要修改普通Picker的显示文本字体。

解决方案 #

默认Picker的automatic样式在iOS上的显示组件属于系统原生UIControl，SwiftUI修饰符无法直接穿透修改字体，需通过自定义Picker的label来完全控制显示样式：

struct PickerFontView: View {
    @State private var years: [String] = ["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019" ]
    @State private var selectedYear: String = "2015"

    var body: some View {
        VStack {
            Text("You chose:")
            Text("\(selectedYear)")
            
            // 自定义label修改Picker显示字体
            Picker(selection: $selectedYear) {
                ForEach(years, id: \.self) { year in
                    Text(year).tag(year)
                }
            } label: {
                HStack {
                    Text("Choose a Year")
                        .font(.title) // 设置标签字体
                    Spacer()
                    Text(selectedYear)
                        .font(.title) // 设置选中值字体
                        .foregroundColor(.secondary)
                }
                .padding(.vertical, 8)
                .underline() // 模拟默认Picker的下划线样式
            }
            .padding(.bottom)
            
            // 原Menu包裹实现方式
            Menu {
                Picker("Choose a Year", selection: $selectedYear) {
                    ForEach(years, id: \.self) { y in
                        Text(y)
                    }
                }
            } label: { Text(selectedYear).font(.title)}
        }
    }
}

说明 #

• 自定义label时，通过HStack组合标签文本与选中值，可分别设置字体样式
• 添加underline()和内边距，模拟默认Picker的视觉样式
• 此方法保留了系统Picker的原生交互逻辑，仅替换显示部分，实现成本最低

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