1# TextPicker 2 3滑动选择文本内容的组件。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17TextPicker(options?: TextPickerOptions) 18 19根据range指定的选择范围创建文本选择器。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ------- | ----------------------------------------------- | ---- | ---------------------- | 27| options | [TextPickerOptions](#textpickeroptions对象说明) | 否 | 配置文本选择器的参数。 | 28 29## TextPickerOptions对象说明 30 31| 名称 | 类型 | 必填 | 描述 | 32| -------- | -------- | -------- | -------- | 33| range | string[] \| string[] []<sup>10+</sup> \| [Resource](ts-types.md#resource类型) \|<br/>[TextPickerRangeContent](#textpickerrangecontent10类型说明)[]<sup>10+</sup> \| [TextCascadePickerRangeContent](#textcascadepickerrangecontent10类型说明)[]<sup>10+</sup> | 是 | 选择器的数据选择列表。不可设置为空数组，若设置为空数组，则不显示；若动态变化为空数组，则保持当前正常值显示。<br/>**说明**：单列数据选择器使用string[]，Resource，TextPickerRangeContent[]类型。<br/>多列数据选择器使用string[][]类型。 <br/>多列联动数据选择器使用TextCascadePickerRangeContent[]类型。<br/>Resource类型只支持[strarray.json](../../../quick-start/resource-categories-and-access.md#资源组目录)。 | 34| selected | number \| number[]<sup>10+</sup> | 否 | 设置默认选中项在数组中的索引值。<br/>默认值：0 <br/>**说明**：单列数据选择器使用number类型。<br/>多列、多列联动数据选择器使用number[]类型。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。| 35| value | string \| string[]<sup>10+</sup> | 否 | 设置默认选中项的值，优先级低于selected。<br/>默认值：第一个元素值<br/>**说明**：只有显示文本列表时该值有效。显示图片或图片加文本的列表时，该值无效。 <br/>单列数据选择器使用string类型。<br/>多列、多列联动数据选择器使用string[]类型。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。| 36 37## TextPickerRangeContent<sup>10+</sup>类型说明 38 39| 参数名 | 参数类型 | 必填 | 参数描述 | 40| ------ | -------------------------------------------------------- | ---- | ---------- | 41| icon | string \| [Resource](ts-types.md#resource) | 是 | 图片资源。 | 42| text | string \| [Resource](ts-types.md#resource) | 否 | 文本信息。 | 43 44## TextCascadePickerRangeContent<sup>10+</sup>类型说明 45 46| 参数名 | 参数类型 | 必填 | 参数描述 | 47| ------ | -------------------------------------------------------- | ---- | ---------- | 48| text | string \| [Resource](ts-types.md#resource) | 是 | 文本信息。 | 49| children | [TextCascadePickerRangeContent](#textcascadepickerrangecontent10类型说明)[] | 否 | 联动数据。 | 50 51## 属性 52 53除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 54 55| 名称 | 参数类型 | 描述 | 56| -------- | -------- | -------- | 57| defaultPickerItemHeight | number \| string | 设置Picker各选择项的高度。 | 58| 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/>} | 59| 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/>} | 60| 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/>} | 61| selectedIndex<sup>10+</sup> | number \| number[] | 设置默认选中项在数组中的索引值，优先级高于options中的选中值。 <br/>**说明**：单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。 | 62| canLoop<sup>10+</sup> | boolean | 设置是否可循环滚动，true：可循环，false：不可循环，默认值：true。 | 63 64## 事件 65 66除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 67 68| 名称 | 描述 | 69| -------- | -------- | 70| onAccept(callback: (value: string, index: number) => void)<sup>(deprecated) </sup> | 点击弹窗中的“确定”按钮时触发该回调。<br/>- value: 当前选中项的文本。<br/>- index: 当前选中项的索引值。<br/> 从API version 10开始废弃。 <br/>**说明：** <br/>该事件仅在[文本滑动选择器弹窗](ts-methods-textpicker-dialog.md)中生效。| 71| onCancel(callback: () => void)<sup>(deprecated) </sup> | 点击弹窗中的“取消”按钮时触发该回调。<br/> 从API version 10开始废弃。<br/>**说明：** <br/>该事件仅在[文本滑动选择器弹窗](ts-methods-textpicker-dialog.md)中生效。 | 72| onChange(callback: (value: string \| string[]<sup>10+</sup>, index: number \| number[]<sup>10+</sup>) => void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>- value: 当前选中项的文本。（多列的情况，value为数组类型。）<br/>- index: 当前选中项的索引值。（多列的情况，index为数组类型。）<br/>**说明**：当显示文本或图片加文本列表时，value值为选中项中的文本值，当显示图片列表时，value值为空。 | 73 74 75## 示例 76 77```ts 78// xxx.ets 79class bottom { 80 bottom:number = 50 81} 82let bott:bottom = new bottom() 83@Entry 84@Component 85struct TextPickerExample { 86 private select: number = 1 87 private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4'] 88 private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4'] 89 private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4'] 90 private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits] 91 private cascade: TextCascadePickerRangeContent[] = [ 92 { 93 text: '辽宁省', 94 children: [{ text: '沈阳市', children: [{ text: '沈河区' }, { text: '和平区' }, { text: '浑南区' }] }, 95 { text: '大连市', children: [{ text: '中山区' }, { text: '金州区' }, { text: '长海县' }] }] 96 }, 97 { 98 text: '吉林省', 99 children: [{ text: '长春市', children: [{ text: '南关区' }, { text: '宽城区' }, { text: '朝阳区' }] }, 100 { text: '四平市', children: [{ text: '铁西区' }, { text: '铁东区' }, { text: '梨树县' }] }] 101 }, 102 { 103 text: '黑龙江省', 104 children: [{ text: '哈尔滨市', children: [{ text: '道里区' }, { text: '道外区' }, { text: '南岗区' }] }, 105 { text: '牡丹江市', children: [{ text: '东安区' }, { text: '西安区' }, { text: '爱民区' }] }] 106 } 107 ] 108 109 build() { 110 Column() { 111 112 TextPicker({ range: this.apfruits, selected: this.select }) 113 .onChange((value: string | string[], index: number | number[]) => { 114 console.info('Picker item changed, value: ' + value + ', index: ' + index) 115 }).margin(bott) 116 117 TextPicker({ range: this.multi }) 118 .onChange((value: string | string[], index: number | number[]) => { 119 console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) 120 }).margin(bott) 121 122 TextPicker({ range: this.cascade }) 123 .onChange((value: string | string[], index: number | number[]) => { 124 console.info('TextPicker 多列联动:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) 125 }) 126 } 127 } 128} 129``` 130 131 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct TextPickerExample { 138 private select: number = 1 139 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 140 141 build() { 142 Column() { 143 TextPicker({ range: this.fruits, selected: this.select }) 144 .onChange((value: string | string[], index: number | number[]) => { 145 console.info('Picker item changed, value: ' + value + ', index: ' + index) 146 }) 147 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 148 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 149 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 150 }.width('100%').height('100%') 151 } 152} 153``` 154 155 156
