1# Text Picker Dialog Box (TextPickerDialog) 2 3A text picker dialog box is a dialog box that allows users to select text from the given range. 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> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showTextPickerDialog](../js-apis-arkui-UIContext.md#showtextpickerdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext), which ensures that the text picker dialog box is shown in the intended UI instance. 12 13## TextPickerDialog 14 15### show 16 17static show(options?: TextPickerDialogOptions) 18 19Shows a text picker in the given settings. 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 | [TextPickerDialogOptions](#textpickerdialogoptions) | No | Parameters of the text picker dialog box.| 30 31## TextPickerDialogOptions 32 33Inherits from [TextPickerOptions](ts-basic-components-textpicker.md#textpickeroptions). 34 35**System capability**: SystemCapability.ArkUI.ArkUI.Full 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| defaultPickerItemHeight | number \| string | No| Height of the picker item.<br>Default value: 56 vp (selected) and 36 vp (unselected). The set value applies to both selected and unselected items.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 40| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| 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>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 41| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| 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>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 42| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | No| 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>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 43| acceptButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the accept button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 44| cancelButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-methods-datepicker-dialog.md#pickerdialogbuttonstyle12) | No| Style of the cancel button.<br>**NOTE**<br>In the **acceptButtonStyle** and **cancelButtonStyle** configurations, only one **primary** field can be set to **true** at most. If both the **primary** fields are set to **true**, neither will take effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 45| canLoop<sup>10+</sup> | boolean | No| Whether to support scroll looping. The value **true** means to support scroll looping, and **false** means the opposite.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| alignment<sup>10+</sup> | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 47| offset<sup>10+</sup> | [Offset](ts-types.md#offset) | No | Offset of the dialog box based on the **alignment** settings.<br>Default value: **{ dx: 0 , dy: 0 }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 48| maskRect<sup>10+</sup>| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.<br>Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 49| onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the OK button in the dialog box is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 50| onCancel | () => void | No| Callback invoked when the Cancel button in the dialog box is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 51| onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the text picker in the dialog box snaps to the selected item.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 52| onScrollStop<sup>14+</sup> | (value: [TextPickerResult](#textpickerresult)) => void | No| Callback invoked when the scrolling in the text picker of the dialog box stops.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 53| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Backplane color of the dialog box.<br>Default value: **Color.Transparent**<br>**NOTE**<br>When **backgroundColor** is set to a non-transparent color, **backgroundBlurStyle** must be set to **BlurStyle.NONE**; otherwise, the color display may not meet the expected effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 54| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**NOTE**<br>Setting this parameter to **BlurStyle.NONE** disables the background blur. When **backgroundBlurStyle** is set to a value other than **NONE**, do not set **backgroundColor**. If you do, the color display may not produce the expected visual effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| onDidAppear<sup>12+</sup> | () => void | No| Event callback when the dialog box appears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onDidAppear**. The settings take effect next time the dialog box appears.<br>3. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>4. If the dialog box is closed before its entrance animation is finished, this callback is not invoked.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| onDidDisappear<sup>12+</sup> | () => void | No| Event callback when the dialog box disappears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57| onWillAppear<sup>12+</sup> | () => void | No| Event callback when the dialog box is about to appear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onWillAppear**. The settings take effect next time the dialog box appears.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58| onWillDisappear<sup>12+</sup> | () => void | No| Event callback when the dialog box is about to disappear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.<br>2. If the user closes the dialog box immediately after it appears, **onWillDisappear** is invoked before **onDidAppear**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.<br>Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 60| enableHoverMode<sup>14+</sup> | boolean | No | Whether to enable the hover mode.<br>Default value: **false**, meaning not to enable the hover mode.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 61| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Display area of the dialog box in hover mode.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 62| disableTextStyleAnimation<sup>15+</sup> | boolean | No | Sets 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**| 63| defaultTextStyle<sup>15+</sup> | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No | 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| 64| onEnterSelectedArea<sup>16+</sup> | Callback\<[TextPickerResult](#textpickerresult)> | No | Represents the callback triggered during the scrolling of the text picker when an item enters the divider area. Compared to the **onChange** event, this event is triggered earlier, specifically when the scroll distance of the current column exceeds half the height of the selected item, which indicates that the item has entered the divider area.<br>**NOTE**<br>In scenarios where the picker contains linked columns, the use of this callback is not recommended. The reason is that it identifies nodes where items enter the divider area during scrolling. However, items that change in response to the scrolling do not themselves scroll. As a result, the callback's return values will only reflect changes for the currently scrolling column, while other non-scrolling columns will remain unchanged.<br>**Atomic service API**: This API can be used in atomic services since API version 16.| 65| enableHapticFeedback<sup>16+</sup> | boolean | No | Whether to enable haptic feedback.<br>**true** (default): Haptic feedback is enabled.<br>**false**: Haptic feedback is disabled.<br>**Atomic service API**: This API can be used in atomic services since API version 16.<br>**NOTE**<br>To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under **requestPermissions** in the **module.json5** file of the project.<br>"requestPermissions": [{"name": "ohos.permission.VIBRATE"}]| 66 67## TextPickerResult 68 69**Atomic service API**: This API can be used in atomic services since API version 11. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name| Type| Read Only| Optional| Description| 74| -------- | -------- | -------- | -------- | -------- | 75| value | string \| string []<sup>10+</sup> | No| No| Text of the selected item.<br>**NOTE**<br>When the picker contains text only or both text and imagery, **value** indicates the text value of the selected item. (For a multi-column picker, **value** is of the array type.)<br>For an image list, **value** is empty.<br>The value cannot contain the following escape character: \\| 76| index | number \| number []<sup>10+</sup> | No| No| Index of the selected item in the range. (For a multi-column picker, **index** is of the array type.)| 77 78## Example 79 80> **NOTE** 81> 82> For clarity in UI execution context, you are advised to use the [showTextPickerDialog](../js-apis-arkui-UIContext.md#showtextpickerdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext). 83 84### Example 1: Displaying a Text Picker Dialog Box 85 86This example demonstrates how to display a text picker dialog box when a button is touched. 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct TextPickerDialogExample { 93 private select: number | number[] = 0 94 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 95 @State v: string = ''; 96 97 build() { 98 Row() { 99 Column() { 100 Button("TextPickerDialog:" + this.v) 101 .margin(20) 102 .onClick(() => { 103 TextPickerDialog.show({ 104 // You are advised to use this.getUIContext().showTextPickerDialog(). 105 range: this.fruits, 106 selected: this.select, 107 value: this.v, 108 defaultPickerItemHeight: 40, 109 onAccept: (value: TextPickerResult) => { 110 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 111 this.select = value.index 112 console.log(this.select + '') 113 // After OK is clicked, the selected item is displayed on the page. 114 this.v = value.value as string 115 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 116 }, 117 onCancel: () => { 118 console.info("TextPickerDialog:onCancel()") 119 }, 120 onChange: (value: TextPickerResult) => { 121 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 122 }, 123 onScrollStop: (value: TextPickerResult) => { 124 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)) 125 }, 126 onDidAppear: () => { 127 console.info("TextPickerDialog:onDidAppear()") 128 }, 129 onDidDisappear: () => { 130 console.info("TextPickerDialog:onDidDisappear()") 131 }, 132 onWillAppear: () => { 133 console.info("TextPickerDialog:onWillAppear()") 134 }, 135 onWillDisappear: () => { 136 console.info("TextPickerDialog:onWillDisappear()") 137 } 138 }) 139 }) 140 }.width('100%') 141 }.height('100%') 142 } 143} 144``` 145 146 147 148 149### Example 2: Customizing the Style 150 151In this example, **disappearTextStyle**, **textStyle**, **selectedTextStyle**, **acceptButtonStyle**, and **cancelButtonStyle** are configured to customize the text and button style. 152 153```ts 154// xxx.ets 155@Entry 156@Component 157struct TextPickerDialogExample { 158 private select: number | number[] = 0 159 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 160 @State v: string = ''; 161 162 build() { 163 Row() { 164 Column() { 165 Button("TextPickerDialog:" + this.v) 166 .margin(20) 167 .onClick(() => { 168 TextPickerDialog.show({ 169 // You are advised to use this.getUIContext().showTextPickerDialog(). 170 range: this.fruits, 171 selected: this.select, 172 disappearTextStyle: { color: '#297bec', font: { size: 15, weight: FontWeight.Lighter } }, 173 textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } }, 174 selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } }, 175 acceptButtonStyle: { 176 type: ButtonType.Normal, 177 style: ButtonStyleMode.NORMAL, 178 role: ButtonRole.NORMAL, 179 fontColor: 'rgb(81, 81, 216)', 180 fontSize: '26fp', 181 fontWeight: FontWeight.Bolder, 182 fontStyle: FontStyle.Normal, 183 fontFamily: 'sans-serif', 184 backgroundColor: '#A6ACAF', 185 borderRadius: 20 186 }, 187 cancelButtonStyle: { 188 type: ButtonType.Normal, 189 style: ButtonStyleMode.NORMAL, 190 role: ButtonRole.NORMAL, 191 fontColor: Color.Blue, 192 fontSize: '16fp', 193 fontWeight: FontWeight.Normal, 194 fontStyle: FontStyle.Italic, 195 fontFamily: 'sans-serif', 196 backgroundColor: '#50182431', 197 borderRadius: 10 198 }, 199 onAccept: (value: TextPickerResult) => { 200 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 201 this.select = value.index 202 console.log(this.select + '') 203 // After OK is clicked, the selected item is displayed on the page. 204 this.v = value.value as string 205 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 206 }, 207 onCancel: () => { 208 console.info("TextPickerDialog:onCancel()") 209 }, 210 onChange: (value: TextPickerResult) => { 211 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)) 212 }, 213 onScrollStop: (value: TextPickerResult) => { 214 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)) 215 }, 216 onDidAppear: () => { 217 console.info("TextPickerDialog:onDidAppear()") 218 }, 219 onDidDisappear: () => { 220 console.info("TextPickerDialog:onDidDisappear()") 221 }, 222 onWillAppear: () => { 223 console.info("TextPickerDialog:onWillAppear()") 224 }, 225 onWillDisappear: () => { 226 console.info("TextPickerDialog:onWillDisappear()") 227 } 228 }) 229 }) 230 }.width('100%') 231 }.height('100%') 232 } 233} 234``` 235 236 237 238### Example 3: Configuring a Dialog Box in the Hover State 239 240This example demonstrates how to set the layout area of a dialog box in hover mode on a foldable device. 241 242```ts 243@Entry 244@Component 245struct TextPickerDialogExample { 246 private select: number | number[] = 0; 247 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 248 @State v: string = ''; 249 250 build() { 251 Row() { 252 Column() { 253 Button("TextPickerDialog:" + this.v) 254 .margin(20) 255 .onClick(() => { 256 TextPickerDialog.show({ // You are advised to use this.getUIContext().showTextPickerDialog(). 257 range: this.fruits, 258 selected: this.select, 259 disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter }}, 260 textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal }}, 261 selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder }}, 262 onAccept: (value: TextPickerResult) => { 263 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 264 this.select = value.index; 265 console.log(this.select + ''); 266 // After OK is clicked, the selected item is displayed on the page. 267 this.v = value.value as string; 268 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 269 }, 270 onCancel: () => { 271 console.info("TextPickerDialog:onCancel()"); 272 }, 273 onChange: (value: TextPickerResult) => { 274 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)); 275 }, 276 onScrollStop: (value: TextPickerResult) => { 277 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)); 278 }, 279 onDidAppear: () => { 280 console.info("TextPickerDialog:onDidAppear()"); 281 }, 282 onDidDisappear: () => { 283 console.info("TextPickerDialog:onDidDisappear()"); 284 }, 285 onWillAppear: () => { 286 console.info("TextPickerDialog:onWillAppear()"); 287 }, 288 onWillDisappear: () => { 289 console.info("TextPickerDialog:onWillDisappear()"); 290 }, 291 enableHoverMode: true, 292 hoverModeArea: HoverModeAreaType.TOP_SCREEN 293 }) 294 }) 295 }.width('100%') 296 }.height('100%') 297 } 298} 299``` 300 301 302 303### Example 4: Setting the Dialog Box Position 304 305This example demonstrates how to set the position of a dialog box using **alignment** and **offset**. 306 307```ts 308// xxx.ets 309@Entry 310@Component 311struct TextPickerDialogExample { 312 private select: number | number[] = 0 313 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 314 @State v: string = ''; 315 316 build() { 317 Row() { 318 Column() { 319 Button("TextPickerDialog:" + this.v) 320 .margin(20) 321 .onClick(() => { 322 TextPickerDialog.show({ 323 range: this.fruits, 324 selected: this.select, 325 alignment: DialogAlignment.Center, 326 offset: { dx: 20, dy: 0 }, 327 onAccept: (value: TextPickerResult) => { 328 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 329 this.select = value.index 330 console.log(this.select + '') 331 // After OK is clicked, the selected item is displayed on the page. 332 this.v = value.value as string 333 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 334 } 335 }) 336 }) 337 }.width('100%') 338 }.height('100%') 339 } 340} 341``` 342 343 344 345### Example 5: Setting the Mask Area 346 347This example demonstrates how to set the mask area using **maskRect**. 348 349```ts 350// xxx.ets 351@Entry 352@Component 353struct TextPickerDialogExample { 354 private select: number | number[] = 0 355 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 356 @State v: string = ''; 357 358 build() { 359 Row() { 360 Column() { 361 Button("TextPickerDialog:" + this.v) 362 .margin(20) 363 .onClick(() => { 364 TextPickerDialog.show({ 365 range: this.fruits, 366 selected: this.select, 367 maskRect: { 368 x: 30, 369 y: 60, 370 width: '100%', 371 height: '60%' 372 }, 373 onAccept: (value: TextPickerResult) => { 374 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 375 this.select = value.index 376 console.log(this.select + '') 377 // After OK is clicked, the selected item is displayed on the page. 378 this.v = value.value as string 379 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 380 } 381 }) 382 }) 383 }.width('100%') 384 }.height('100%') 385 } 386} 387``` 388 389 390 391### Example 6: Setting the Background 392 393This example demonstrates how to set the dialog box background using **backgroundColor**, **backgroundBlurStyle**, and **shadow**. 394 395```ts 396// xxx.ets 397@Entry 398@Component 399struct TextPickerDialogExample { 400 private select: number | number[] = 0 401 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 402 @State v: string = ''; 403 404 build() { 405 Row() { 406 Column() { 407 Button("TextPickerDialog:" + this.v) 408 .margin(20) 409 .onClick(() => { 410 TextPickerDialog.show({ 411 range: this.fruits, 412 selected: this.select, 413 backgroundColor: 'rgb(204, 226, 251)', 414 backgroundBlurStyle: BlurStyle.NONE, 415 shadow: ShadowStyle.OUTER_FLOATING_SM, 416 onAccept: (value: TextPickerResult) => { 417 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 418 this.select = value.index 419 console.log(this.select + '') 420 // After OK is clicked, the selected item is displayed on the page. 421 this.v = value.value as string 422 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 423 } 424 }) 425 }) 426 }.width('100%') 427 }.height('100%') 428 } 429} 430``` 431 432 433 434 435### Example 7: Setting Loopable Scrolling 436 437This example demonstrates how to set whether scrolling is loopable using **canLoop**. 438 439```ts 440// xxx.ets 441@Entry 442@Component 443struct TextPickerDialogExample { 444 private select: number | number[] = 0 445 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'] 446 @State v: string = ''; 447 448 build() { 449 Row() { 450 Column() { 451 Button("TextPickerDialog:" + this.v) 452 .margin(20) 453 .onClick(() => { 454 TextPickerDialog.show({ 455 range: this.fruits, 456 selected: this.select, 457 value: this.v, 458 canLoop: false, 459 onAccept: (value: TextPickerResult) => { 460 // Set select to the index of the item selected when the OK button is touched. In this way, when the text picker dialog box is displayed again, the selected item is the one last confirmed. 461 this.select = value.index 462 console.log(this.select + '') 463 // After OK is clicked, the selected item is displayed on the page. 464 this.v = value.value as string 465 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)) 466 } 467 }) 468 }) 469 }.width('100%') 470 }.height('100%') 471 } 472} 473``` 474 475 476
