文章目录完整代码功能说明核心参数1. 必选参数2. 遮蔽区参数3. 回调事件4. 结果对象 TextPickerResult代码结构说明总结完整代码// xxx.ets Entry Component struct TextPickerDialogExample { private select: number | number[] 0; private fruits: string[] [apple1, orange2, peach3, grape4, banana5]; State selectedValue: string ; build() { Stack({ alignContent: Alignment.Top }) { // $r(app.media.bg)需要替换为开发者所需的图像资源文件。 Image($r(app.media.bg)) Row() { Column() { Button(TextPickerDialog: this.selectedValue) .margin(20) .onClick(() { this.getUIContext().showTextPickerDialog({ range: this.fruits, selected: this.select, maskRect: { x: 30, y: 60, width: 100%, height: 60% }, onAccept: (value: TextPickerResult) { // 设置select为按下确定按钮时候的选中项index这样当弹窗再次弹出时显示选中的是上一次确定的选项 this.select value.index; console.info(this.select ); // 点击确定后被选到的文本数据展示到页面 this.selectedValue value.value as string; console.info(TextPickerDialog:onAccept() JSON.stringify(value)); } }); }) }.width(100%) } }.height(100%) } }运行效果如图功能说明本示例实现带自定义遮蔽区的文本选择弹窗页面按钮展示当前选中的值点击弹出文本选择器展示固定数据源水果列表apple/orange/peach/grape/banana自定义 maskRect 遮蔽区域仅指定区域内事件有效记忆上次选中项下次打开自动定位点击确定后结果实时显示在按钮上采用官方推荐UIContext调用方式支持背景图布局核心参数1. 必选参数参数类型作用rangestring[]文本选择器数据源滚动列表selectednumber初始化默认选中项索引2. 遮蔽区参数参数类型作用maskRectRectangle弹窗有效遮蔽区域x:30左边距30vpy:60顶边距60vpwidth:‘100%’宽度铺满height:‘60%’高度占窗口60%3. 回调事件参数作用onAccept点击确定触发返回选中结果onCancel点击取消触发onChange滑动停止后触发4. 结果对象 TextPickerResult字段含义value选中的文本index选中项在数组中的索引代码结构说明数据源fruits: string[]提供选择列表。状态记忆select保存选中索引下次打开定位selectedValue页面展示选中结果布局结构Stack背景图 内容层叠Row Column按钮居中布局按钮文字实时展示选择结果弹窗逻辑调用getUIContext().showTextPickerDialog打开配置 range、selected、maskRect、回调。总结调用方式从 API 18 开始TextPickerDialog.show()已废弃必须使用this.getUIContext().showTextPickerDialog()。maskRect 规则遮蔽区外事件可穿透区内不可穿透常用于半屏弹窗、局部选择场景。数据记忆示例中select value.index实现下次弹窗自动定位上次选择。设备限制不支持 Wearable 设备。背景图资源$r(app.media.bg)必须替换为真实图片否则运行报错。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力