1# 文本滑动选择器弹窗 2 3根据指定的选择范围创建文本选择器，展示在弹窗上。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## TextPickerDialog.show 11 12show(options?: TextPickerDialogOptions) 13 14定义文本滑动选择器弹窗并弹出。 15 16**TextPickerDialogOptions参数：** 17 18| 参数名 | 参数类型 | 必填 | 参数描述 | 19| -------- | -------- | -------- | -------- | 20| range | string[] \| [Resource](ts-types.md#resource) | 是 | 设置文本选择器的选择范围。 | 21| selected | number | 否 | 设置选中项的索引值。<br>默认值：0 | 22| value | string | 否 | 设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。| 23| defaultPickerItemHeight | number \| string | 否 | 设置选择器中选项的高度。 | 24| onAccept | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 | 25| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | 26| onChange | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 | 27 28## TextPickerResult对象说明 29 30| 名称 | 类型 | 描述 | 31| -------- | -------- | -------- | 32| value | string | 选中项的文本内容。 | 33| index | number | 选中项在选择范围数组中的索引值。 | 34 35## 示例 36 37```ts 38// xxx.ets 39@Entry 40@Component 41struct TextPickerDialogExample { 42 @State select: number = 2 43 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 44 45 build() { 46 Row() { 47 Column() { 48 Button("TextPickerDialog") 49 .margin(20) 50 .onClick(() => { 51 TextPickerDialog.show({ 52 range: this.fruits, 53 selected: this.select, 54 onAccept: (value: TextPickerResult) => { 55 // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项 56 this.select = value.index 57 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 58 }, 59 onCancel: () => { 60 console.info("TextPickerDialog:onCancel()") 61 }, 62 onChange: (value: TextPickerResult) => { 63 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 64 } 65 }) 66 }) 67 }.width('100%') 68 }.height('100%') 69 } 70} 71``` 72 73
