1# 文本滑动选择器弹窗 (TextPickerDialog) 2 3根据指定的选择范围创建文本选择器，展示在弹窗上。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](../js-apis-arkui-UIContext.md#uicontext)说明。 10> 11> 从API version 10开始，可以通过使用[UIContext](../js-apis-arkui-UIContext.md#uicontext)中的[showTextPickerDialog](../js-apis-arkui-UIContext.md#showtextpickerdialog)来明确UI的执行上下文。 12 13## TextPickerDialog.show 14 15show(options?: TextPickerDialogOptions) 16 17定义文本滑动选择器弹窗并弹出。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ------- | ----------------------------------------------------------- | ---- | -------------------------- | 25| options | [TextPickerDialogOptions](#textpickerdialogoptions对象说明) | 否 | 配置文本选择器弹窗的参数。 | 26 27## TextPickerDialogOptions对象说明 28 29文本选择器弹窗的参数继承自[TextPickerOptions](ts-basic-components-textpicker.md#textpickeroptions对象说明)。 30 31| 名称 | 类型 | 必填 | 描述 | 32| -------- | -------- | -------- | -------- | 33| defaultPickerItemHeight | number \| string | 否 | 设置选择器中选项的高度。<br/>默认值：选中项56vp，非选中项36vp。设置该参数后，选中项与非选中项的高度均为所设置的值。 | 34| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 35| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} | 36| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值：<br/>{<br/>color: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} | 37| canLoop<sup>10+</sup> | boolean | 否 | 设置是否可循环滚动，true：可循环，false：不可循环，默认值：true。 | 38| alignment<sup>10+</sup> | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment枚举说明) | 否 | 弹窗在竖直方向上的对齐方式。<br>默认值：DialogAlignment.Default | 39| offset<sup>10+</sup> | [Offset](ts-types.md#offset) | 否 | 弹窗相对alignment所在位置的偏移量。<br/>默认值：{ dx: 0 , dy: 0 } | 40| maskRect<sup>10+</sup>| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8类型说明) | 否 | 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。<br/>默认值：{ x: 0, y: 0, width: '100%', height: '100%' } | 41| onAccept | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 | 42| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | 43| onChange | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 | 44| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent。 | 45| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。 | 46 47## TextPickerResult对象说明 48 49| 名称 | 类型 | 描述 | 50| -------- | -------- | -------- | 51| value | string \| string []<sup>10+</sup> | 选中项的文本内容。<br/>**说明**：当显示文本或图片加文本列表时，value值为选中项中的文本值。（文本选择器显示多列时，value为数组类型。）<br/>当显示图片列表时，value值为空。 | 52| index | number \| number []<sup>10+</sup> | 选中项在选择范围数组中的索引值。（文本选择器显示多列时，index为数组类型。） | 53 54## 示例 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct TextPickerDialogExample { 61 private select: number | number[] = 0 62 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 63 @State v:string = ''; 64 65 build() { 66 Row() { 67 Column() { 68 Button("TextPickerDialog:" + this.v) 69 .margin(20) 70 .onClick(() => { 71 TextPickerDialog.show({ 72 range: this.fruits, 73 selected: this.select, 74 disappearTextStyle: {color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}, 75 textStyle: {color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}, 76 selectedTextStyle: {color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}, 77 onAccept: (value: TextPickerResult) => { 78 // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项 79 this.select = value.index 80 console.log(this.select + '') 81 // 点击确定后，被选到的文本数据展示到页面 82 this.v = value.value as string 83 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 84 }, 85 onCancel: () => { 86 console.info("TextPickerDialog:onCancel()") 87 }, 88 onChange: (value: TextPickerResult) => { 89 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 90 } 91 }) 92 }) 93 }.width('100%') 94 }.height('100%') 95 } 96} 97``` 98 99 100
