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**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description | 28| ------- | ----------------------------------------------- | ---- | ---------------------- | 29| options | [TextPickerOptions](#textpickeroptions) | No | Parameters of the text picker.| 30 31## TextPickerOptions 32 33**Atomic service API**: This API can be used in atomic services since API version 11. 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| range | string[] \| string[] []<sup>10+</sup> \| [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).<br>The type and number of columns in the range cannot be dynamically modified.| 40| 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 attribute supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).| 41| 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 two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).| 42 43## TextPickerRangeContent<sup>10+</sup> 44 45**Atomic service API**: This API can be used in atomic services since API version 11. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49| Name| Type | Mandatory| Description | 50| ------ | -------------------------------------------------------- | ---- | ---------- | 51| icon | string \| [Resource](ts-types.md#resource) | Yes | Image resource.| 52| text | string \| [Resource](ts-types.md#resource) | No | Text information.| 53 54## TextCascadePickerRangeContent<sup>10+</sup> 55 56**Atomic service API**: This API can be used in atomic services since API version 11. 57 58**System capability**: SystemCapability.ArkUI.ArkUI.Full 59 60| Name| Type | Mandatory| Description | 61| ------ | -------------------------------------------------------- | ---- | ---------- | 62| text | string \| [Resource](ts-types.md#resource) | Yes | Text information.| 63| children | [TextCascadePickerRangeContent](#textcascadepickerrangecontent10)[] | No | Linkage data.| 64## DividerOptions<sup>12+</sup> 65 66**Atomic service API**: This API can be used in atomic services since API version 12. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70| Name | Type | Mandatory| Description | 71| ----------- | ------------- | ---- | -------------------------------------------------------------- | 72| strokeWidth | [Dimension](ts-types.md#dimension10) | No | Stroke width of the divider. The unit is vp by default. You can also specify it as px. The percentage type is not supported.| 73| startMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the start edge of the picker. The unit is vp by default. You can also specify it as px. The percentage type is not supported.| 74| endMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the end edge of the picker. The unit is vp by default. You can also specify it as px. The percentage type is not supported.| 75| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the divider. 76 77## Attributes 78 79In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 80 81### defaultPickerItemHeight 82 83defaultPickerItemHeight(value: number | string) 84 85Sets the height of each item in the picker. 86 87**Atomic service API**: This API can be used in atomic services since API version 11. 88 89**System capability**: SystemCapability.ArkUI.ArkUI.Full 90 91**Parameters** 92 93| Name| Type | Mandatory| Description | 94| ------ | -------------------------- | ---- | ---------------------- | 95| value | number \| string | Yes | Height of each item in the picker.| 96 97### disappearTextStyle<sup>10+</sup> 98 99disappearTextStyle(value: PickerTextStyle) 100 101Sets the font color, font size, and font weight for the top and bottom items. 102 103**Atomic service API**: This API can be used in atomic services since API version 11. 104 105**System capability**: SystemCapability.ArkUI.ArkUI.Full 106 107**Parameters** 108 109| Name| Type | Mandatory| Description | 110| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 111| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight of the top and bottom items.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>}<br>} | 112 113### textStyle<sup>10+</sup> 114 115textStyle(value: PickerTextStyle) 116 117Sets the font color, font size, and font weight for all items except the top, bottom, and selected items. 118 119**Atomic service API**: This API can be used in atomic services since API version 11. 120 121**System capability**: SystemCapability.ArkUI.ArkUI.Full 122 123**Parameters** 124 125| Name| Type | Mandatory| Description | 126| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 127| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight 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>} | 128 129### selectedTextStyle<sup>10+</sup> 130 131selectedTextStyle(value: PickerTextStyle) 132 133Sets the font color, font size, and font weight for the selected item. 134 135**Atomic service API**: This API can be used in atomic services since API version 11. 136 137**System capability**: SystemCapability.ArkUI.ArkUI.Full 138 139**Parameters** 140 141| Name| Type | Mandatory| Description | 142| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 143| value | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Yes | Font color, font size, and font weight of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20vp', <br>weight: FontWeight.Medium<br>}<br>} | 144 145### selectedIndex<sup>10+</sup> 146 147selectedIndex(value: number | number[]) 148 149Sets the index of the default selected item in the array. Its priority is higher than that of the selected value in **options**. 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. 150 151**Atomic service API**: This API can be used in atomic services since API version 11. 152 153**System capability**: SystemCapability.ArkUI.ArkUI.Full 154 155**Parameters** 156 157| Name| Type | Mandatory| Description | 158| ------ | ---------------------------- | ---- | ---------------------------- | 159| value | number \| number[] | Yes | Index of the default selected item in the array.<br>Default value: **0**<br>| 160 161### canLoop<sup>10+</sup> 162 163canLoop(value: boolean) 164 165Sets whether scrolling is loopable. 166 167**Atomic service API**: This API can be used in atomic services since API version 11. 168 169**System capability**: SystemCapability.ArkUI.ArkUI.Full 170 171**Parameters** 172 173| Name| Type | Mandatory| Description | 174| ------ | ------- | ---- | ------------------------------------------------------------ | 175| value | boolean | Yes | Whether scrolling is loopable.<br>**true**: loopable<br>**false**: not loopable<br>Default value: **true**| 176 177### divider<sup>12+</sup> 178 179divider(value: DividerOptions | null) 180 181Sets the divider style. If this attribute is not set, the divider is displayed based on the default value. 182 183If the sum of **startMargin** and **endMargin** exceeds the component width, both **startMargin** and **endMargin** will be set to **0**. 184 185**Atomic service API**: This API can be used in atomic services since API version 12. 186 187**System capability**: SystemCapability.ArkUI.ArkUI.Full 188 189**Parameters** 190| Name| Type | Mandatory| Description | 191| ------ | ------- | ---- | --------------------------------------------------------------------- | 192| value | [DividerOptions](#divideroptions12) \| null | Yes | Divider options.<br>1. If **DividerOptions** is set, the divider is displayed in the configured style.<br>Default value:<br>{<br>strokeWidth: '2px', <br>startMargin: 0, <br>endMargin: 0, <br>color: '#33000000'<br>}<br>2. If this parameter is set to **null**, the divider is not displayed.| 193 194### gradientHeight<sup>12+</sup> 195 196gradientHeight(value: Dimension) 197 198Sets the height for the fade effect. If this attribute is not set, the default fade effect is displayed. 199 200**Atomic service API**: This API can be used in atomic services since API version 12. 201 202**System capability**: SystemCapability.ArkUI.ArkUI.Full 203 204**Parameters** 205 206| Name| Type | Mandatory| Description | 207| ------ | ------- | ---- | ------------------------------------------------------------ | 208| value | [Dimension](ts-types.md#dimension10) | Yes | Height of the gradient effect at the top and bottom edges of the content area. It can be set in percentage, with 100% (the maximum value) being half the height of the picker. Setting it to **0** will result in no gradient effect, while negative numbers or other invalid values will display the default gradient effect. Default value: **36vp**| 209 210### disableTextStyleAnimation<sup>15+</sup> 211 212disableTextStyleAnimation(disabled: boolean) 213 214Sets whether to enable the text style change animation during the scrolling process. When this API is used with **true**, there are no text style changes, including the font size, weight, and color, during scrolling, and all text is displayed in the style set by [defaultTextStyle](#defaulttextstyle15). If **defaultTextStyle** is not set, the text is displayed in the default style of the **Text** component. 215 216**Atomic service API**: This API can be used in atomic services since API version 15. 217 218**System capability**: SystemCapability.ArkUI.ArkUI.Full 219 220**Parameters** 221 222| Name| Type | Mandatory| Description | 223| ------ | ------- | ---- | ------------------------------------------------------------ | 224| disabled | boolean | Yes | Whether to enable the text style change animation during the scrolling process.<br>**true**: Disable the text style change animation.<br>**false**: Enable the text style change animation.<br>Default value: **false**| 225 226### defaultTextStyle<sup>15+</sup> 227 228defaultTextStyle(style: TextPickerTextStyle) 229 230Sets the style of the text items when the text style change animation during the scrolling process is disabled. 231 232**Atomic service API**: This API can be used in atomic services since API version 15. 233 234**System capability**: SystemCapability.ArkUI.ArkUI.Full 235 236**Parameters** 237 238| Name| Type | Mandatory| Description | 239| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 240| style | [TextPickerTextStyle](#textpickertextstyle15) | Yes | Style of the text items when the text style change animation during the scrolling process is disabled. It is effective only when **disableTextStyleAnimation** is **true**.<br>Default value: same as the default value of the [Text](ts-basic-components-text.md) component| 241 242> **NOTE** 243> 244> Avoid changing the attribute data during the animation process of this component. 245 246## Events 247 248In addition to the [universal events](ts-component-general-events.md), the following events are supported. 249 250### onAccept<sup>(deprecated) </sup> 251 252onAccept(callback: (value: string, index: number) => void) 253 254Triggered when the OK button in the dialog box is clicked. This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md). 255 256This API is deprecated since API version 10. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name| Type | Mandatory| Description | 263| ------ | ------ | ---- | -------------------- | 264| value | string | Yes | Text of the selected item. | 265| index | number | Yes | Index of the selected item.| 266 267### onCancel<sup>(deprecated) </sup> 268 269onCancel(callback: () => void) 270 271Triggered when the Cancel button in the dialog box is clicked. This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md). 272 273This API is deprecated since API version 10. 274 275**System capability**: SystemCapability.ArkUI.ArkUI.Full 276 277### onChange 278 279onChange(callback: (value: string \| string[], index: number \| number[]) => void) 280 281Triggered when an item in the picker is selected. When the picker contains text only or both text and imagery, **value** indicates the text of the selected item. When the picker contains imagery only, **value** is empty. 282 283**Atomic service API**: This API can be used in atomic services since API version 11. 284 285**System capability**: SystemCapability.ArkUI.ArkUI.Full 286 287**Parameters** 288 289| Name| Type | Mandatory| Description | 290| ------ | ------------------------------------------ | ---- | ------------------------------------------------- | 291| value | string \| string[]<sup>10+</sup> | Yes | Text of the selected item. For a multi-column picker, **value** is of the array type. | 292| index | number \| number[]<sup>10+</sup> | Yes | Index of the selected item. For a multi-column picker, **index** is of the array type.| 293 294### onScrollStop<sup>14+</sup> 295 296onScrollStop(callback: TextPickerScrollStopCallback) 297 298Triggered when the scrolling in the text picker stops. 299 300If the scrolling is initiated by a gesture, this event is triggered when the finger is lifted from the screen and the scrolling stops. 301 302When the picker contains text only or a combination of images and text, **value** indicates the text of the selected item. When the picker contains images only, **value** is empty. 303 304**Atomic service API**: This API can be used in atomic services since API version 14. 305 306**System capability**: SystemCapability.ArkUI.ArkUI.Full 307 308**Parameters** 309 310| Name| Type | Mandatory| Description | 311| ------ | ------------------------------------------ | ---- | ------------------------------------------------- | 312| callback | [TextPickerScrollStopCallback](#textpickerscrollstopcallback14) | Yes | Triggered when the scrolling in the text picker stops.| 313 314## TextPickerScrollStopCallback<sup>14+</sup> 315 316type TextPickerScrollStopCallback = (value: string | string[], index: number | number[]) => void 317 318Triggered when the scrolling in the text picker stops. 319 320**Widget capability**: This API can be used in ArkTS widgets since API version 14. 321 322**Atomic service API**: This API can be used in atomic services since API version 14. 323 324**System capability**: SystemCapability.ArkUI.ArkUI.Full 325 326**Parameters** 327 328| Name| Type | Mandatory| Description | 329| ------ | ------------------------------------------ | ---- | ------------------------------------------------- | 330| value | string \| string[] | Yes | Text of the selected item. For a multi-column picker, **value** is of the array type. | 331| index | number \| number[] | Yes | Index of the selected item. For a multi-column picker, **index** is of the array type.| 332 333## TextPickerTextStyle<sup>15+</sup> 334 335Defines the text style options. Inherits [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10). 336 337**Atomic service API**: This API can be used in atomic services since API version 15. 338 339| Name | Type | Mandatory | Description | 340| ----- | ---------------------------------------- | ---- | ------------------------- | 341| color | [ResourceColor](ts-types.md#resourcecolor) | No | Text color. | 342| font | [Font](ts-types.md#font) | No | Text style.| 343| minFontSize | number \| string \| [Resource](ts-types.md#resource) | No | Minimum font size, used in conjunction with **maxFontSize**. When **minFontSize** and **maxFontSize** are set, the **size** setting in **font** is ineffective. The default maximum number of lines is 1, and the default height adaptation mode is **MIN_FONT_SIZE_FIRST**. | 344| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | No | Maximum font size. | 345| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the text is too long. Ineffective when set to **MARQUEE**. | 346 347## Example 348 349### Example 1: Setting the Number of Columns in the Picker 350 351This example demonstrates how to set **range** to implement single-column or multi-column text pickers. 352 353```ts 354// xxx.ets 355class bottom { 356 bottom:number = 50 357} 358let bott:bottom = new bottom() 359@Entry 360@Component 361struct TextPickerExample { 362 private select: number = 1 363 private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4'] 364 private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4'] 365 private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4'] 366 private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits] 367 private cascade: TextCascadePickerRangeContent[] = [ 368 { 369 text: 'Asia', 370 children: [{ text: 'China', children: [{ text: 'Beijing' }, { text: 'Shanghai' }, { text: 'Chongqing' }] }, 371 { text: 'Japan', children: [{ text: 'Tokyo' }, { text: 'Hokkaido' }, { text: 'Osaka' }] }] 372 }, 373 { 374 text: 'Europe', 375 children: [{ text: 'Germany', children: [{ text: 'Berlin' }, { text: 'Munich' }, { text: 'Nuremberg' }] }, 376 { text: 'France', children: [{ text: 'Paris' }, { text: 'Lille' }, { text: 'Orleans' }] }] 377 }, 378 { 379 text: 'Africa', 380 children: [{ text: 'Egypt', children: [{ text: 'Cairo' }, { text: 'Damietta' }, { text: 'Girga' }] }, 381 { text: 'Algeria', children: [{ text: 'Alger' }, { text: 'Oran' }, { text: 'Adrar' }] }] 382 } 383 ] 384 385 build() { 386 Column() { 387 388 TextPicker({ range: this.apfruits, selected: this.select }) 389 .onChange((value: string | string[], index: number | number[]) => { 390 console.info('Picker item changed, value: ' + value + ', index: ' + index) 391 }) 392 .onScrollStop((value: string | string[], index: number | number[]) => { 393 console.info('Picker scroll stopped, value: ' + value + ', index: ' + index) 394 }).margin(bott) 395 396 TextPicker({ range: this.multi }) 397 .onChange((value: string | string[], index: number | number[]) => { 398 console.info('TextPicker multi-column: onChange' + JSON.stringify(value) + ',' + 'index:' + JSON.stringify(index)) 399 }) 400 .onScrollStop((value: string | string[], index: number | number[]) => { 401 console.info('TextPicker multi-column: onScrollStop ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) 402 }).margin(bott) 403 404 TextPicker({ range: this.cascade }) 405 .onChange((value: string | string[], index: number | number[]) => { 406 console.info('TextPicker multi-column linkage: onChange' + JSON.stringify(value) + ',' + 'index:' + JSON.stringify(index)) 407 }) 408 .onScrollStop((value: string | string[], index: number | number[]) => { 409 console.info('TextPicker multi-column linkage: onScrollStop ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index)) 410 }) 411 } 412 } 413} 414``` 415 416 417 418### Example 2: Setting the Text Style 419 420This example demonstrates how to configure **disappearTextStyle**, **textStyle**, and **selectedTextStyle** to customize the text style in a text picker. 421 422```ts 423// xxx.ets 424@Entry 425@Component 426struct TextPickerExample { 427 private select: number = 1 428 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 429 430 build() { 431 Column() { 432 TextPicker({ range: this.fruits, selected: this.select }) 433 .onChange((value: string | string[], index: number | number[]) => { 434 console.info('Picker item changed, value: ' + value + ', index: ' + index) 435 }) 436 .onScrollStop((value: string | string[], index: number | number[]) => { 437 console.info('Picker scroll stopped, value: ' + value + ', index: ' + index) 438 }) 439 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 440 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 441 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 442 }.width('100%').height('100%') 443 } 444} 445``` 446 447 448 449### Example 3: Using the No-Divider Style 450 451This example demonstrates how to configure a text picker with no divider by setting **divider** to **null**. 452 453```ts 454// xxx.ets 455@Entry 456@Component 457struct TextPickerExample { 458 private select: number = 1 459 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 460 461 build() { 462 Column() { 463 TextPicker({ range: this.fruits, selected: this.select }) 464 .onChange((value: string | string[], index: number | number[]) => { 465 console.info('Picker item changed, value: ' + value + ', index: ' + index) 466 }) 467 .onScrollStop((value: string | string[], index: number | number[]) => { 468 console.info('Picker scroll stopped, value: ' + value + ', index: ' + index) 469 }) 470 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 471 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 472 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 473 .divider(null) 474 }.width('100%').height('100%') 475 } 476} 477``` 478 479 480### Example 3: Using the Divider Style 481 482This example demonstrates how to configure a text picker with a custom divider style by setting **divider** with **DividerOptions**. 483 484```ts 485// xxx.ets 486@Entry 487@Component 488struct TextPickerExample { 489 private select: number = 1 490 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 491 492 build() { 493 Column() { 494 TextPicker({ range: this.fruits, selected: this.select }) 495 .onChange((value: string | string[], index: number | number[]) => { 496 console.info('Picker item changed, value: ' + value + ', index: ' + index) 497 }) 498 .onScrollStop((value: string | string[], index: number | number[]) => { 499 console.info('Picker scroll stopped, value: ' + value + ', index: ' + index) 500 }) 501 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 502 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 503 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 504 .divider({ 505 strokeWidth: 10, 506 color: Color.Red, 507 startMargin: 10, 508 endMargin: 20 509 } as DividerOptions) 510 }.width('100%').height('100%') 511 } 512} 513``` 514 515 516### Example 5: Setting the Fade Effect 517 518This example demonstrates how to customize the height of the fade effect in a text picker using **gradientHeight**. 519 520```ts 521// xxx.ets 522@Entry 523@Component 524struct TextPickerExample { 525 private select: number = 1 526 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4'] 527 528 build() { 529 Column() { 530 TextPicker({ range: this.fruits, selected: this.select }) 531 .onChange((value: string | string[], index: number | number[]) => { 532 console.info('Picker item changed, value: ' + value + ', index: ' + index) 533 }) 534 .onScrollStop((value: string | string[], index: number | number[]) => { 535 console.info('Picker scroll stopped, value: ' + value + ', index: ' + index) 536 }) 537 .disappearTextStyle({color: Color.Red, font: {size: 15, weight: FontWeight.Lighter}}) 538 .textStyle({color: Color.Black, font: {size: 20, weight: FontWeight.Normal}}) 539 .selectedTextStyle({color: Color.Blue, font: {size: 30, weight: FontWeight.Bolder}}) 540 .gradientHeight(100) 541 }.width('100%').height('100%') 542 } 543} 544``` 545 546 547### Example 5: Disabling the Text Style Animation and Setting the Corresponding Text Style 548 549This example demonstrates how to disable the text style animation and set the corresponding text style using **disableTextStyleAnimation** and **defaultTextStyle**. 550 551```ts 552// xxx.ets 553@Entry 554@Component 555struct TextPickerExample { 556 private select: number = 1 557 private fruits: string[] = ['AAAAA', 'BBBBBBBBBBBBB', 'CCCC', 'DDDDDDDD', 'EEE'] 558 559 build() { 560 Column() { 561 TextPicker({ 562 range: this.fruits, 563 selected: this.select, 564 value: this.fruits[this.select] 565 }) 566 .disableTextStyleAnimation(true) 567 .margin({ bottom: 30 }) 568 TextPicker({ 569 range: this.fruits, 570 selected: this.select, 571 value: this.fruits[this.select] 572 }) 573 .disableTextStyleAnimation(true) 574 .defaultTextStyle({ minFontSize: 18, maxFontSize: 28, overflow: TextOverflow.Ellipsis }) 575 }.width('100%').height('100%') 576 } 577} 578``` 579 580 581
