Select 与 TextPicker — 原生选择器组件的应用实践一、引言在表单和配置页面中选择器组件是用户最常交互的控件之一。鸿蒙系统提供了 Select下拉选择器和 TextPicker文本选择器两种原生选择方案各有适用场景。Select 适合选项较少的轻量选择占用空间小以下拉菜单展开TextPicker 适合选项较多的滚动选择体验更接近原生 iOS 的滚轮选择器。此外鸿蒙还提供了 DatePicker日期选择器和 TimePicker时间选择器作为基于 TextPicker 的封装方案。MoneyTrack 在统计页面中结合 Select 实现报表/日历视图的快速切换在预算设置中使用 TextPicker 进行金额和周期设置。二、核心知识点2.1 Select 下拉选择器Select 是紧凑型的选择控件点击后弹出下拉列表供用户选择。其完整属性包括options选项数组每个元素包含value显示文本和icon可选图标selected当前选中项的索引从 0 开始value当前显示的文本内容不设置时默认显示选中的 option 的 valuefontColor选项文本颜色支持 Color 枚举或十六进制字符串selectedOptionBgColor下拉列表中选中项的背景色通常用于悬停/高亮状态arrowPosition下拉箭头的位置可选ArrowPosition.END尾部或ArrowPosition.START头部menuAlign下拉菜单的对齐方式可选MenuAlign.START左对齐或MenuAlign.END右对齐Select([{value:报表视图,icon:$r(app.media.ic_chart)},{value:日历视图,icon:$r(app.media.ic_calendar)}]).selected(0).fontColor(#333333).selectedOptionBgColor(#F5F5F5).arrowPosition(ArrowPosition.END).menuAlign(MenuAlign.START).onSelect((index:number,value:string){this.currentViewindex})2.2 TextPicker 文本选择器TextPicker 以滚轮形式展示选项列表适合选项较多的场景。其核心参数包括range选项数组string[]或Resource类型selected选中项的索引value选中项的文本值只读用于获取当前选中文本TextPicker 支持三级样式体系实现从边缘到中间的渐变视觉效果disappearTextStyle边缘消失区域文本样式通常设置较小的字号和较浅的颜色normalTextStyle可见区域非选中项样式字号适中selectedTextStyle中间选中项样式字号最大、颜色最深TextPicker({range:[100,200,500,1000,2000,5000],selected:2}).disappearTextStyle({color:#CCCCCC,fontSize:14})// 边缘文字.normalTextStyle({color:#999999,fontSize:16})// 普通文字.selectedTextStyle({color:#333333,fontSize:20})// 选中文字.onChange((value:string){this.selectedAmountvalue})2.3 DatePicker 与 TimePickerDatePicker 和 TimePicker 是基于 TextPicker 的封装分别用于日期和时间的选择DatePicker选择年/月/日支持start/end限定范围TimePicker选择时/分支持 24 小时制和 12 小时制DatePicker({start:newDate(2024-01-01),end:newDate(2026-12-31),selected:newDate()}).onChange((value:DatePickerResult){console.log(${value.year}-${value.month}-${value.day})})TimePicker({selected:newDate()}).useMilitaryTime(false)// 使用 12 小时制.onChange((value:TimePickerResult){console.log(${value.hour}:${value.minute})})2.4 Select 下拉菜单布局层次STARTENDSelect 组件触发区域: 显示当前选中值 箭头图标用户点击menuAlign 对齐下拉菜单左对齐展开下拉菜单右对齐展开选项列表选项项: icon value选中项高亮: selectedOptionBgColor触发 onSelect 回调更新 selected 索引关闭下拉菜单2.5 无障碍适配选择器组件在无障碍场景下需要注意以下方面内容描述通过accessibilityText为选择器提供语义化描述便于屏幕阅读器朗读触摸目标大小确保选项的触摸区域不小于 48vp无障碍推荐的最小触摸目标焦点管理Select 打开/关闭后需合理管理焦点回退Select([...]).accessibilityText(选择报表视图或日历视图)// 无障碍描述.selectedOptionBgColor(#F5F5F5)三、项目代码案例3.1 StatisticsView 中的 Select 视图切换在products/entry/src/main/ets/views/statistics/StatisticsView.ets中使用 Select 组件实现报表视图和日历视图的切换Select([{value:报表},{value:日历}]).selected(this.currentViewIndex).fontColor(#333333).selectedOptionBgColor(#F5F5F5).arrowPosition(ArrowPosition.END).onSelect((index:number,value:string){this.currentViewIndexindexthis.switchView(index0?chart:calendar)})Select 作为轻量切换控件占用导航栏少量空间选中后更新currentViewIndex触发视图切换逻辑自定义字体颜色和选项背景色与应用主题统一3.2 样式配置要点fontColor设置 Select 的文本颜色通常使用主文字色#333333selectedOptionBgColor控制下拉选项的悬停/选中背景色建议使用浅灰色#F5F5F5arrowPosition控制箭头位置默认在尾部menuAlign控制下拉菜单的展开方向右对齐时适合右侧布局TextPicker 的selectedTextStyle字号应明显大于normalTextStyle营造滚轮聚焦效果3.3 选择器选型建议场景推荐组件原因视图切换2-5项Select紧凑、轻量占用空间小日期选择DatePicker基于 TextPicker 封装交互直观时间选择TimePicker原生时间滚轮支持 12/24 小时制金额区间选择TextPicker数值可精确预览滚轮体验好分类选择少量Select下拉列表展示清晰图标可辅助辨识分类选择大量bindSheet List可自定义布局支持搜索四、最佳实践选项数量匹配2-5 个选项优先使用 Select6 个以上考虑 TextPicker 或 bindSheet自定义样式统一项目中所有 Select 的fontColor和selectedOptionBgColor保持统一建议封装为全局常量无障碍支持始终为选择器提供accessibilityText描述触摸目标不小于 48vp滚轮字体层级TextPicker 的disappearTextStyle→normalTextStyle→selectedTextStyle形成字号渐大、颜色渐深的视觉梯度DatePicker 范围限定使用start/end参数限定可选日期范围防止用户选择无效日期五、总结Select 和 TextPicker 满足不同粒度的选择需求。Select 以下拉菜单形式展示适合选项数量少、空间有限的场景通过arrowPosition和menuAlign可灵活控制菜单布局。TextPicker 以滚轮形式展示适合大量选项的滚动选择其三级样式体系disappearTextStyle/normalTextStyle/selectedTextStyle提供了边缘淡出的原生视觉体验。DatePicker 和 TimePicker 作为 TextPicker 的封装方案进一步简化了日期和时间的选择交互。在 MoneyTrack 的实际开发中视图切换使用 Select预算金额使用 TextPicker日期选择使用 DatePicker形成了完整的选择器应用体系。六、参考文档Select 组件 APITextPicker API 参考DatePicker API 参考TimePicker API 参考选择器组件最佳实践