1# Text Picker Dialog Box (TextPickerDialog) 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @luoying_ace_admin--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9A text picker dialog box is a dialog box that allows users to select text from the given range. 10 11> **NOTE** 12> 13> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 14> 15> - 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](../../../ui/arkts-global-interface.md). For details, see [UIContext](../arkts-apis-uicontext-uicontext.md). 16 17## TextPickerDialog 18 19### show<sup>(deprecated)</sup> 20 21static show(options?: TextPickerDialogOptions) 22 23Shows a text picker in the given settings. 24 25> **NOTE** 26> 27> This API is deprecated since API version 18. You are advised to use [showTextPickerDialog](../arkts-apis-uicontext-uicontext.md#showtextpickerdialog) in [UIContext](../arkts-apis-uicontext-uicontext.md) instead. 28> 29> Since API version 10, you can use the [showTextPickerDialog](../arkts-apis-uicontext-uicontext.md#showtextpickerdialog) API in [UIContext](../arkts-apis-uicontext-uicontext.md), which ensures that the text picker dialog box is shown in the intended UI instance. 30 31**Atomic service API**: This API can be used in atomic services since API version 11. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Device behavior differences**: On wearables, calling this API results in a runtime exception indicating that the API is undefined. On other devices, the API works correctly. 36 37**Parameters** 38 39| Name | Type | Mandatory| Description | 40| ------- | ----------------------------------------------------------- | ---- | -------------------------- | 41| options | [TextPickerDialogOptions](#textpickerdialogoptions) | No | Parameters of the text picker dialog box.| 42 43## TextPickerDialogOptions 44 45Inherits from [TextPickerOptions](ts-basic-components-textpicker.md#textpickeroptions). 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49| Name| Type| Read Only| Optional| Description| 50| -------- | -------- | -------- | -------- | -------- | 51| defaultPickerItemHeight | number \| string | No| Yes| Height of the picker item. For the number type, the value range is [0, +∞). For the string type, only numeric string values, for example, **"56"**, are supported.<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.| 52| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-picker-common.md#pickertextstyle) | No| Yes| Text color, font size, and font weight of the items located two positions above or below the selected item.<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.| 53| textStyle<sup>10+</sup> | [PickerTextStyle](ts-picker-common.md#pickertextstyle) | No| Yes| Text color, font size, and font weight of the items located one position above or below the selected item.<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.| 54| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-picker-common.md#pickertextstyle) | No| Yes| Text color, font size, and font weight of the selected item.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20fp', <br>weight: FontWeight.Medium<br>}<br>}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 55| acceptButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-picker-common.md#pickerdialogbuttonstyle12) | No| Yes| Style of the accept button.<br>**NOTE**<br>1. In **acceptButtonStyle** and **cancelButtonStyle**, at most one **primary** field can be set to **true**. If both are set to **true**, the **primary** field will remain at the default value of **false**.<br>2. The default button height is 40 vp and remains fixed even in accessibility and large-font modes. In addition, even if the button style is set to [ROUNDED_RECTANGLE](ts-basic-components-button.md#buttontype), the displayed effect is still a capsule button ([Capsule](ts-basic-components-button.md#buttontype)).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| cancelButtonStyle<sup>12+</sup> | [PickerDialogButtonStyle](ts-picker-common.md#pickerdialogbuttonstyle12) | No| Yes| Style of the cancel button.<br>**NOTE**<br>1. In **acceptButtonStyle** and **cancelButtonStyle**, at most one **primary** field can be set to **true**. If both are set to **true**, the **primary** field will remain at the default value of **false**.<br>2. The default button height is 40 vp and remains fixed even in accessibility and large-font modes. In addition, even if the button style is set to [ROUNDED_RECTANGLE](ts-basic-components-button.md#buttontype), the displayed effect is still a capsule button ([Capsule](ts-basic-components-button.md#buttontype)).<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57| canLoop<sup>10+</sup> | boolean | No| Yes| 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.| 58| alignment<sup>10+</sup> | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Yes | 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.| 59| offset<sup>10+</sup> | [Offset](ts-types.md#offset) | No | Yes | 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.| 60| maskRect<sup>10+</sup>| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8) | No | Yes | 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.| 61| onAccept | (value: [TextPickerResult](#textpickerresult)) => void | No| Yes| Triggered 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.| 62| onCancel | () => void | No| Yes| Triggered 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.| 63| onChange | (value: [TextPickerResult](#textpickerresult)) => void | No| Yes| Triggered when the text picker in the dialog box snaps to the selected item.<br>This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use **onEnterSelectedArea** instead.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 64| onScrollStop<sup>14+</sup> | [Callback](ts-types.md#callback12)\<TextPickerResult> | No| Yes| Triggered 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.| 65| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Yes| 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.| 66| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Yes| 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.| 67| backgroundBlurStyleOptions<sup>19+</sup> | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10) | No| Yes| Options for customizing the background blur style.<br>**Atomic service API**: This API can be used in atomic services since API version 19.| 68| backgroundEffect<sup>19+</sup> | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | No| Yes| Options for customizing the background effect.<br>**Atomic service API**: This API can be used in atomic services since API version 19.| 69| onDidAppear<sup>12+</sup> | () => void | No| Yes| 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.| 70| onDidDisappear<sup>12+</sup> | () => void | No| Yes| 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.| 71| onWillAppear<sup>12+</sup> | () => void | No| Yes| 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.| 72| onWillDisappear<sup>12+</sup> | () => void | No| Yes| 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.| 73| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Yes | 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.| 74| enableHoverMode<sup>14+</sup> | boolean | No | Yes | Whether to respond when the device is in semi-folded mode.<br>Default value: **false**, meaning not to respond when the device is in semi-folded mode.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 75| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Yes | Display area of the dialog box when the device is in semi-folded mode.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 76| disableTextStyleAnimation<sup>15+</sup> | boolean | No | Yes | 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**<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 77| defaultTextStyle<sup>15+</sup> | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No | 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<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 78| onEnterSelectedArea<sup>18+</sup> | Callback\<[TextPickerResult](#textpickerresult)> | No | Yes | 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 18.| 79| enableHapticFeedback<sup>18+</sup> | boolean | No | Yes | 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 18.<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"}]| 80| selectedBackgroundStyle<sup>20+</sup> | [PickerBackgroundStyle](ts-basic-components-textpicker.md) | No | Yes | Background color of the selected item.<br>Default value:<br>{ <br>color: '#0C182431'<br>borderRadius: { value:24 unit:1 }<br>}<br>**Atomic service API**: This API can be used in atomic services since API version 20.<br>| 81 82## TextPickerDialogOptionsExt<sup>20+</sup> 83 84Inherits from [TextPickerOptions](ts-basic-components-textpicker.md#textpickeroptions). 85 86**Atomic service API**: This API can be used in atomic services since API version 20. 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90| Name| Type| Read Only| Optional| Description| 91| -------- | -------- | -------- | -------- | -------- | 92| defaultPickerItemHeight | number \| string | No| Yes| Height of the picker item. For the number type, the value range is [0, +∞). For the string type, only numeric string values, for example, **"56"**, are supported.<br>Default value: 56 vp (selected) and 36 vp (unselected). The set value applies to both selected and unselected items.| 93| acceptButtonStyle | [PickerDialogButtonStyle](ts-picker-common.md#pickerdialogbuttonstyle12) | No | Yes | Style of the accept button.<br>**NOTE**<br>1. In **acceptButtonStyle** and **cancelButtonStyle**, at most one **primary** field can be set to **true**. If both are set to **true**, the **primary** field will remain at the default value of **false**.<br>2. The default button height is 40 vp and remains fixed even in accessibility and large-font modes. In addition, even if the button style is set to [ROUNDED_RECTANGLE](ts-basic-components-button.md#buttontype), the displayed effect is still a capsule button ([Capsule](ts-basic-components-button.md#buttontype)).| 94| cancelButtonStyle | [PickerDialogButtonStyle](ts-picker-common.md#pickerdialogbuttonstyle12) | No | Yes | Style of the cancel button.<br>**NOTE**<br>1. In **acceptButtonStyle** and **cancelButtonStyle**, at most one **primary** field can be set to **true**. If both are set to **true**, the **primary** field will remain at the default value of **false**.<br>2. The default button height is 40 vp and remains fixed even in accessibility and large-font modes. In addition, even if the button style is set to [ROUNDED_RECTANGLE](ts-basic-components-button.md#buttontype), the displayed effect is still a capsule button ([Capsule](ts-basic-components-button.md#buttontype)).| 95| canLoop | boolean | No | Yes | Whether to support scroll looping. The value **true** means to support scroll looping, and **false** means the opposite.<br>Default value: **true**| 96| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Yes| Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**| 97| offset | [Offset](ts-types.md#offset) | No | Yes | Offset of the dialog box based on the **alignment** settings.<br>Default value: **{ dx: 0 , dy: 0 }**| 98| maskRect| [Rectangle](ts-methods-alert-dialog-box.md#rectangle8) | No | Yes | 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%' }**| 99| onAccept | [Callback](ts-types.md#callback12)\<[TextPickerResult](#textpickerresult)> | No| Yes| Triggered when the OK button in the dialog box is clicked.| 100| onCancel | [VoidCallback](ts-types.md#voidcallback12) | No| Yes| Triggered when the Cancel button in the dialog box is clicked.| 101| onChange | [Callback](ts-types.md#callback12)\<[TextPickerResult](#textpickerresult)> | No| Yes| Triggered when the text picker in the dialog box snaps to the selected item.<br>This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use **onEnterSelectedArea** instead.| 102| onScrollStop | [Callback](ts-types.md#callback12)\<[TextPickerResult](#textpickerresult)> | No| Yes| Triggered when the scrolling in the text picker of the dialog box stops.| 103| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Yes| 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.| 104| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Yes| 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.| 105| backgroundBlurStyleOptions | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10) | No| Yes| Options for customizing the background blur style.<br>**Atomic service API**: This API can be used in atomic services since API version 20.| 106| backgroundEffect | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | No| Yes| Options for customizing the background effect.| 107| onDidAppear | [VoidCallback](ts-types.md#voidcallback12) | No| Yes| 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.| 108| onDidDisappear | [VoidCallback](ts-types.md#voidcallback12) | No| Yes| 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.| 109| onWillAppear | [VoidCallback](ts-types.md#voidcallback12) | No| Yes| 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.| 110| onWillDisappear | [VoidCallback](ts-types.md#voidcallback12) | No| Yes| 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**.| 111| shadow | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Yes | 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| 112| enableHoverMode | boolean | No | Yes | Whether to respond when the device is in semi-folded mode.<br>Default value: **false**, meaning not to respond when the device is in semi-folded mode.| 113| hoverModeArea | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Yes | Display area of the dialog box when the device is in semi-folded mode.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**| 114| disableTextStyleAnimation | boolean | No | Yes | 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**| 115| defaultTextStyle | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No | 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| 116| onEnterSelectedArea | [Callback](ts-types.md#callback12)\<[TextPickerResult](#textpickerresult)> | No | Yes | 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.| 117| enableHapticFeedback | boolean | No | Yes | Whether to enable haptic feedback.<br>**true** (default): Haptic feedback is enabled.<br>**false**: Haptic feedback is disabled.<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"}]| 118| selectedBackgroundStyle | [PickerBackgroundStyle](ts-basic-components-textpicker.md) | No | Yes | Background color of the selected item.<br>Default value:<br>{ <br>color: '#0C182431'<br>borderRadius: { value:24 unit:1 }<br>}| 119| disappearTextStyle | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No| Yes| Style of the items located two positions above or below the selected item, covering the following: text color, font size, font weight, maximum font size, minimum font size, text overflow mode.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '14fp', <br>weight: FontWeight.Regular<br>},<br>minFontSize: 0,<br>maxFontSize: 0,<br>overflow: TextOverflow.CLIP<br>} | 120| textStyle | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No| Yes| Style of the items located one position above or below the selected item, covering the following: text color, font size, font weight, maximum font size, minimum font size, text overflow mode.<br>Default value:<br>{<br>color: '#ff182431',<br>font: {<br>size: '16fp', <br>weight: FontWeight.Regular<br>},<br>minFontSize: 0,<br>maxFontSize: 0,<br>overflow: TextOverflow.CLIP<br>} | 121| selectedTextStyle | [TextPickerTextStyle](ts-basic-components-textpicker.md#textpickertextstyle15) | No| Yes| Style of the selected item, covering the following: text color, font size, font weight, maximum font size, minimum font size, text overflow mode.<br>Default value:<br>{<br>color: '#ff007dff',<br>font: {<br>size: '20fp', <br>weight: FontWeight.Medium<br>},<br>minFontSize: 0,<br>maxFontSize: 0,<br>overflow: TextOverflow.CLIP<br>} | 122 123 124 125## TextPickerResult 126 127Represents the selection result of a **TextPicker** component. 128 129**Atomic service API**: This API can be used in atomic services since API version 11. 130 131**System capability**: SystemCapability.ArkUI.ArkUI.Full 132 133| Name| Type| Read Only| Optional| Description| 134| -------- | -------- | -------- | -------- | -------- | 135| 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: \\| 136| index | number \| number []<sup>10+</sup> | No| No| Index of the selected item in the range. The index is zero-based. (For a multi-column picker, **index** is of the array type.)| 137 138## Example 139 140> **NOTE** 141> 142> For clarity in UI execution context, you are advised to use the [showTextPickerDialog](../arkts-apis-uicontext-uicontext.md#showtextpickerdialog) API in [UIContext](../arkts-apis-uicontext-uicontext.md). 143 144### Example 1: Displaying a Text Picker Dialog Box 145 146This example demonstrates how to display a text picker dialog box when a button is touched. 147 148```ts 149// xxx.ets 150@Entry 151@Component 152struct TextPickerDialogExample { 153 private select: number | number[] = 0; 154 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 155 @State v: string = ''; 156 157 build() { 158 Row() { 159 Column() { 160 Button("TextPickerDialog:" + this.v) 161 .margin(20) 162 .onClick(() => { 163 this.getUIContext().showTextPickerDialog({ 164 range: this.fruits, 165 selected: this.select, 166 value: this.v, 167 defaultPickerItemHeight: 40, 168 onAccept: (value: TextPickerResult) => { 169 // 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. 170 this.select = value.index; 171 console.log(this.select + ''); 172 // After OK is clicked, the selected item is displayed on the page. 173 this.v = value.value as string; 174 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 175 }, 176 onCancel: () => { 177 console.info("TextPickerDialog:onCancel()"); 178 }, 179 onChange: (value: TextPickerResult) => { 180 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)); 181 }, 182 onScrollStop: (value: TextPickerResult) => { 183 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)); 184 }, 185 onDidAppear: () => { 186 console.info("TextPickerDialog:onDidAppear()"); 187 }, 188 onDidDisappear: () => { 189 console.info("TextPickerDialog:onDidDisappear()"); 190 }, 191 onWillAppear: () => { 192 console.info("TextPickerDialog:onWillAppear()"); 193 }, 194 onWillDisappear: () => { 195 console.info("TextPickerDialog:onWillDisappear()"); 196 } 197 }); 198 }) 199 }.width('100%') 200 }.height('100%') 201 } 202} 203``` 204 205 206 207 208### Example 2: Customizing the Style 209 210In this example, **disappearTextStyle**, **textStyle**, **selectedTextStyle**, **acceptButtonStyle**, and **cancelButtonStyle** are configured to customize the text and button style. 211 212```ts 213// xxx.ets 214@Entry 215@Component 216struct TextPickerDialogExample { 217 private select: number | number[] = 0; 218 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 219 @State v: string = ''; 220 221 build() { 222 Row() { 223 Column() { 224 Button("TextPickerDialog:" + this.v) 225 .margin(20) 226 .onClick(() => { 227 this.getUIContext().showTextPickerDialog({ 228 range: this.fruits, 229 selected: this.select, 230 disappearTextStyle: { color: '#297bec', font: { size: 15, weight: FontWeight.Lighter } }, 231 textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } }, 232 selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } }, 233 acceptButtonStyle: { 234 type: ButtonType.Normal, 235 style: ButtonStyleMode.NORMAL, 236 role: ButtonRole.NORMAL, 237 fontColor: 'rgb(81, 81, 216)', 238 fontSize: '26fp', 239 fontWeight: FontWeight.Bolder, 240 fontStyle: FontStyle.Normal, 241 fontFamily: 'sans-serif', 242 backgroundColor: '#A6ACAF', 243 borderRadius: 20 244 }, 245 cancelButtonStyle: { 246 type: ButtonType.Normal, 247 style: ButtonStyleMode.NORMAL, 248 role: ButtonRole.NORMAL, 249 fontColor: Color.Blue, 250 fontSize: '16fp', 251 fontWeight: FontWeight.Normal, 252 fontStyle: FontStyle.Italic, 253 fontFamily: 'sans-serif', 254 backgroundColor: '#50182431', 255 borderRadius: 10 256 }, 257 onAccept: (value: TextPickerResult) => { 258 // 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. 259 this.select = value.index; 260 console.log(this.select + ''); 261 // After OK is clicked, the selected item is displayed on the page. 262 this.v = value.value as string; 263 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 264 }, 265 onCancel: () => { 266 console.info("TextPickerDialog:onCancel()"); 267 }, 268 onChange: (value: TextPickerResult) => { 269 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)); 270 }, 271 onScrollStop: (value: TextPickerResult) => { 272 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)); 273 }, 274 onDidAppear: () => { 275 console.info("TextPickerDialog:onDidAppear()"); 276 }, 277 onDidDisappear: () => { 278 console.info("TextPickerDialog:onDidDisappear()"); 279 }, 280 onWillAppear: () => { 281 console.info("TextPickerDialog:onWillAppear()"); 282 }, 283 onWillDisappear: () => { 284 console.info("TextPickerDialog:onWillDisappear()"); 285 } 286 }); 287 }) 288 }.width('100%') 289 }.height('100%') 290 } 291} 292``` 293 294 295 296### Example 3: Configuring a Dialog Box in the Hover State 297 298This example demonstrates how to set the layout area of a dialog box when the device is in semi-folded mode. 299 300```ts 301@Entry 302@Component 303struct TextPickerDialogExample { 304 private select: number | number[] = 0; 305 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 306 @State v: string = ''; 307 308 build() { 309 Row() { 310 Column() { 311 Button("TextPickerDialog:" + this.v) 312 .margin(20) 313 .onClick(() => { 314 this.getUIContext().showTextPickerDialog({ 315 range: this.fruits, 316 selected: this.select, 317 disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter }}, 318 textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal }}, 319 selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder }}, 320 onAccept: (value: TextPickerResult) => { 321 // 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. 322 this.select = value.index; 323 console.log(this.select + ''); 324 // After OK is clicked, the selected item is displayed on the page. 325 this.v = value.value as string; 326 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 327 }, 328 onCancel: () => { 329 console.info("TextPickerDialog:onCancel()"); 330 }, 331 onChange: (value: TextPickerResult) => { 332 console.info("TextPickerDialog:onChange()" + JSON.stringify(value)); 333 }, 334 onScrollStop: (value: TextPickerResult) => { 335 console.info("TextPickerDialog:onScrollStop()" + JSON.stringify(value)); 336 }, 337 onDidAppear: () => { 338 console.info("TextPickerDialog:onDidAppear()"); 339 }, 340 onDidDisappear: () => { 341 console.info("TextPickerDialog:onDidDisappear()"); 342 }, 343 onWillAppear: () => { 344 console.info("TextPickerDialog:onWillAppear()"); 345 }, 346 onWillDisappear: () => { 347 console.info("TextPickerDialog:onWillDisappear()"); 348 }, 349 enableHoverMode: true, 350 hoverModeArea: HoverModeAreaType.TOP_SCREEN 351 }); 352 }) 353 }.width('100%') 354 }.height('100%') 355 } 356} 357``` 358 359 360 361### Example 4: Setting the Dialog Box Position 362 363This example demonstrates how to set the position of a dialog box using **alignment** and **offset**. 364 365```ts 366// xxx.ets 367@Entry 368@Component 369struct TextPickerDialogExample { 370 private select: number | number[] = 0; 371 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 372 @State v: string = ''; 373 374 build() { 375 Row() { 376 Column() { 377 Button("TextPickerDialog:" + this.v) 378 .margin(20) 379 .onClick(() => { 380 this.getUIContext().showTextPickerDialog({ 381 range: this.fruits, 382 selected: this.select, 383 alignment: DialogAlignment.Center, 384 offset: { dx: 20, dy: 0 }, 385 onAccept: (value: TextPickerResult) => { 386 // 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. 387 this.select = value.index; 388 console.log(this.select + ''); 389 // After OK is clicked, the selected item is displayed on the page. 390 this.v = value.value as string; 391 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 392 } 393 }); 394 }) 395 }.width('100%') 396 }.height('100%') 397 } 398} 399``` 400 401 402 403### Example 5: Setting the Mask Area 404 405This example demonstrates how to set the mask area using **maskRect**. 406 407```ts 408// xxx.ets 409@Entry 410@Component 411struct TextPickerDialogExample { 412 private select: number | number[] = 0; 413 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 414 @State v: string = ''; 415 416 build() { 417 Row() { 418 Column() { 419 Button("TextPickerDialog:" + this.v) 420 .margin(20) 421 .onClick(() => { 422 this.getUIContext().showTextPickerDialog({ 423 range: this.fruits, 424 selected: this.select, 425 maskRect: { 426 x: 30, 427 y: 60, 428 width: '100%', 429 height: '60%' 430 }, 431 onAccept: (value: TextPickerResult) => { 432 // 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. 433 this.select = value.index; 434 console.log(this.select + ''); 435 // After OK is clicked, the selected item is displayed on the page. 436 this.v = value.value as string; 437 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 438 } 439 }); 440 }) 441 }.width('100%') 442 }.height('100%') 443 } 444} 445``` 446 447 448 449### Example 6: Setting the Background 450 451This example demonstrates how to set the dialog box background using **backgroundColor**, **backgroundBlurStyle**, and **shadow**. 452 453```ts 454// xxx.ets 455@Entry 456@Component 457struct TextPickerDialogExample { 458 private select: number | number[] = 0; 459 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 460 @State v: string = ''; 461 462 build() { 463 Row() { 464 Column() { 465 Button("TextPickerDialog:" + this.v) 466 .margin(20) 467 .onClick(() => { 468 this.getUIContext().showTextPickerDialog({ 469 range: this.fruits, 470 selected: this.select, 471 backgroundColor: 'rgb(204, 226, 251)', 472 backgroundBlurStyle: BlurStyle.NONE, 473 shadow: ShadowStyle.OUTER_FLOATING_SM, 474 onAccept: (value: TextPickerResult) => { 475 // 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. 476 this.select = value.index; 477 console.log(this.select + ''); 478 // After OK is clicked, the selected item is displayed on the page. 479 this.v = value.value as string; 480 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 481 } 482 }); 483 }) 484 }.width('100%') 485 }.height('100%') 486 } 487} 488``` 489 490 491 492 493### Example 7: Setting Cyclic Scrolling 494 495This example demonstrates how to set whether to enable cyclic scrolling using **canLoop**. 496 497```ts 498// xxx.ets 499@Entry 500@Component 501struct TextPickerDialogExample { 502 private select: number | number[] = 0; 503 private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']; 504 @State v: string = ''; 505 506 build() { 507 Row() { 508 Column() { 509 Button("TextPickerDialog:" + this.v) 510 .margin(20) 511 .onClick(() => { 512 this.getUIContext().showTextPickerDialog({ 513 range: this.fruits, 514 selected: this.select, 515 value: this.v, 516 canLoop: false, 517 onAccept: (value: TextPickerResult) => { 518 // 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. 519 this.select = value.index; 520 console.log(this.select + ''); 521 // After OK is clicked, the selected item is displayed on the page. 522 this.v = value.value as string; 523 console.info("TextPickerDialog:onAccept()" + JSON.stringify(value)); 524 } 525 }); 526 }) 527 }.width('100%') 528 }.height('100%') 529 } 530} 531``` 532 533 534 535### Example 8: Setting the Background Style of the Selected Item 536 537This example shows how to set the background style of the selected item by configuring **selectedBackgroundStyle**. 538 539```ts 540// xxx.ets 541@Entry 542@Component 543struct TextPickerExample { 544 private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1'] 545 build() { 546 Column() { 547 Row() { 548 Button("TextPickerDialog") 549 .margin(20) 550 .onClick(() => { 551 this.getUIContext().showTextPickerDialog({ 552 range: this.showText1, 553 selectedBackgroundStyle: { 554 borderRadius: { 555 topLeft:15, 556 topRight:15, 557 bottomLeft:15, 558 bottomRight:15 559 }, 560 color: "FFC3C3C3" 561 } 562 }) 563 }) 564 } 565 }.height('100%') 566 } 567} 568``` 569 570 571 572### Example 9: Customizing the Background Blur Effect 573 574This example demonstrates how to customize the background blur effect by configuring [backgroundBlurStyleOptions](#textpickerdialogoptions). This functionality is supported since API version 19. 575 576```ts 577@Entry 578@Component 579struct TextPickerExample { 580 private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1'] 581 582 build() { 583 Stack({ alignContent: Alignment.Top }) { 584 Image($r('app.media.bg')) 585 Column() { 586 Button("TextPickerDialog") 587 .margin(20) 588 .onClick(() => { 589 this.getUIContext().showTextPickerDialog({ 590 range: this.showText1, 591 backgroundColor: undefined, 592 backgroundBlurStyle: BlurStyle.Thin, 593 backgroundBlurStyleOptions: { 594 colorMode: ThemeColorMode.LIGHT, 595 adaptiveColor: AdaptiveColor.AVERAGE, 596 scale: 1, 597 blurOptions: { grayscale: [20, 20] }, 598 }, 599 }) 600 }) 601 }.width('100%') 602 } 603 } 604} 605``` 606 607 608 609### Example 10: Customizing the Background Effect 610 611This example demonstrates how to customize the background effect by configuring [backgroundEffect](#textpickerdialogoptions). This functionality is supported since API version 19. 612 613```ts 614@Entry 615@Component 616struct TextPickerExample { 617 private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1'] 618 619 build() { 620 Stack({ alignContent: Alignment.Top }) { 621 Image($r('app.media.bg')) 622 Column() { 623 Button("TextPickerDialog") 624 .margin(20) 625 .onClick(() => { 626 this.getUIContext().showTextPickerDialog({ 627 range: this.showText1, 628 backgroundColor: undefined, 629 backgroundBlurStyle: BlurStyle.Thin, 630 backgroundEffect: { 631 radius: 60, 632 saturation: 0, 633 brightness: 1, 634 color: Color.White, 635 blurOptions: { grayscale: [20, 20] } 636 }, 637 }) 638 }) 639 }.width('100%') 640 } 641 } 642} 643``` 644 645 646
