1# TextPicker 2 3The **\<TextPicker>** component allows users to scroll to select text. 4 5> **NOTE** 6> 7> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17TextPicker(options?: TextPickerOptions) 18 19Creates a text picker based on the selection range specified by **range**. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------- | ----------------------------------------------- | ---- | ---------------------- | 27| options | [TextPickerOptions](#textpickeroptions) | No | Parameters of the text picker.| 28 29## TextPickerOptions 30 31| Name| Type| Mandatory| Description| 32| -------- | -------- | -------- | -------- | 33| range | string[] \| string[] []10+ \| [Resource](ts-types.md#resource) \|<br>[TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> \| [TextCascadePickerRangeContent](#textcascadepickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.<br>**NOTE**<br>For a single-column picker, use a value of the string[], Resource, or TextPickerRangeContent[] type.<br>For a multi-column picker, use a value of the string[] type.<br>For a multi-column linked picker, use a value of the TextCascadePickerRangeContent[] type.<br>The Resource type supports only [strarray.json](../../quick-start/resource-categories-and-access.md#resource-group-directories).| 34| selected | number \| number[]<sup>10+</sup> | No| Index of the default item in the range.<br>Default value: **0**<br>**NOTE**<br>For a single-column picker, use a value of the number type.<br>For a multi-column (linked) picker, use a value of the number[] type.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 35| value | string \| string[]<sup>10+</sup> | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**<br>This parameter works only when the picker contains text only. <br>For a single-column picker, use a value of the string type.<br>For a multi-column (linked) picker, use a value of the string[] type.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 36 37## TextPickerRangeContent<sup>10+</sup> 38 39| Name| Type | Mandatory| Description | 40| ------ | -------------------------------------------------------- | ---- | ---------- | 41| icon | string \| [Resource](ts-types.md#resource) | Yes | Image resource.| 42| text | string \| [Resource](ts-types.md#resource) | No | Text information.| 43 44## TextCascadePickerRangeContent<sup>10+</sup> 45 46| Name| Type | Mandatory| Description | 47| ------ | -------------------------------------------------------- | ---- | ---------- | 48| text | string \| [Resource](ts-types.md#resource) | Yes | Text information.| 49| children | [TextCascadePickerRangeContent](#textcascadepickerrangecontent10)[] | No | Linkage data.| 50 51## Attributes 52 53In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 54 55| Name| Type| Description| 56| -------- | -------- | -------- | 57| defaultPickerItemHeight | number \| string | Height of each item in the picker.| 58| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.<br>Default value:<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) | Font color, font size, and font width of all items except the top, bottom, and selected items.<br>Default value:<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) | Font color, font size, and font width of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} | 61| selectedIndex<sup>10+</sup> | number \| number[] | Index of the default selected item in the array. Its priority is higher than that of the selected value in **options**.<br>**NOTE**<br>For a single-column picker, use a value of the number type. For a multi-column (linked) picker, use a value of the number[] type.| 62| canLoop<sup>10+</sup> | boolean | Whether to support scroll looping. The value **true** means to support scroll looping, and **false** means the opposite.<br>Default value: **true**| 63 64## Events 65 66In addition to the [universal events](ts-universal-events-click.md), the following events are supported. 67 68| Name| Description| 69| -------- | -------- | 70| onAccept(callback: (value: string, index: number) => void)<sup>(deprecated) </sup> | Triggered when the OK button in the dialog box is clicked.<br>- **value**: value of the selected item.<br>- **index**: index of the selected item.<br> This API is deprecated since API version 10.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| 71| onCancel(callback: () => void)<sup>(deprecated) </sup> | Triggered when the Cancel button in the dialog box is clicked.<br> This API is deprecated since API version 10.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).| 72| onChange(callback: (value: string \| string[]<sup>10+</sup>, index: number \| number[]<sup>10+</sup>) => void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item. (For a multi-column picker, **value** is of the array type.)<br>- **index**: index of the selected item. (For a multi-column picker, **index** is of the array type.)<br>**NOTE**<br>When the picker contains text only or both text and imagery, **value** indicates the text value of the selected item. When the picker contains imagery only, **value** is empty.| 73 74 75## Example 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: 'Category 1', 94 children: [{ text: 'China', children: [{ text: 'Beijing' }, { text: 'Shanghai' }, { text: 'Chongqing' }] }, 95 { text: 'Japan', children: [{ text: 'Tokyo' }, { text: 'Hokkaido' }, { text: 'Osaka' }] }] 96 }, 97 { 98 text: 'Europe', 99 children: [{ text: 'Germany', children: [{ text: 'Berlin' }, { text: 'Munich' }, { text: 'Nuremberg' }] }, 100 { text: 'France', children: [{ text: 'Paris' }, { text: 'Lille' }, { text: 'Orleans' }] }] 101 }, 102 { 103 text: 'Africa', 104 children: [{ text: 'Egypt', children: [{ text: 'Cairo' }, { text: 'Damietta' }, { text: 'Girga' }] }, 105 { text: 'Algeria', children: [{ text: 'Alger' }, { text: 'Oran' }, { text: 'Adrar' }] }] 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 multi-column: 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 multi-column linkage: 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
