SwiftUI如何修改Menu样式Picker的选中显示文本样式
问题描述
我编写了如下代码实现 Picker 组件:
Picker(languages[currentIndex].name,selection: $currentIndex){ ForEach(0..<languages.count, id: \.self){index in Text(languages[index].name) } }
组件默认运行时,Menu 样式下收起状态的选中文本显示为系统默认蓝色,我先后尝试给 Picker 内部的 Text 组件、Picker 本身添加样式修饰符,都无法修改该选中文本的样式。
硬性约束:该 Picker 必须使用 Menu 样式,不能切换为 wheel 等其他 pickerStyle。我测试过,当 pickerStyle 设置为 .wheel 时,给 Text 添加自定义字体样式可以正常生效,代码如下:
Picker(languages[currentIndex].name,selection: $currentIndex){ ForEach(0..<languages.count, id: \.self){index in Text(languages[index].name) .font(.custom("Montserrat Medium", size:16)) } } .pickerStyle(.wheel)
但 wheel 样式不符合业务需求,我仅需要自定义 Menu 样式下 Picker 收起状态显示的选中文本样式。
可行实现方案
Menu 样式 Picker 收起状态的选中文本是系统独立渲染的默认标签,给内部选项、Picker 本体添加常规样式修饰符不会作用到这个标签上。直接使用自定义 label 的 Picker 初始化方法,替换掉系统默认标签即可,不需要修改 pickerStyle,实现代码如下:
Picker(selection: $currentIndex) { ForEach(0..<languages.count, id: \.self) { index in Text(languages[index].name) .font(.custom("Montserrat Medium", size: 16)) } } label: { // 该部分内容为Picker收起状态下显示的标签,可任意自定义样式 Text(languages[currentIndex].name) .font(.custom("Montserrat Medium", size: 16)) .foregroundColor(.black) // 替换默认蓝色为你需要的目标颜色 } .pickerStyle(.menu) // 保留要求的Menu样式
关键注意点:不要使用带第一个标题参数的 Picker 初始化方法,一旦传入第一个字符串参数,系统会强制使用自带渲染逻辑的默认标签,你编写的自定义 label 会被直接忽略,这也是之前添加样式一直不生效的核心原因。
如果需要同步调整弹出菜单内选项的高亮 tint 色,给 Picker 追加 .tint() 修饰符设置对应色值即可。
内容的提问来源于stack exchange,提问作者CrimsonDay
相关产品推荐
相关产品推荐

