目录

Text Picker Dialog Box (TextPickerDialog)

A text picker dialog box is a dialog box that allows users to select text from the given range.

  • This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

  • 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 ambiguous. For details, see UIContext.

  • This module does not support dynamic updates for color mode (light or dark) changes. To apply a new color mode, close and reopen the dialog box.

  • The maximum number of rows that can be displayed varies by screen orientation: In portrait mode, the default number of rows is 5. In landscape mode, the number of rows depends on the system configuration. If no system configuration is set, the default is 3 rows. To check the specific system configuration value for landscape mode, use $r('sys.float.ohos_id_picker_show_count_landscape').

TextPickerDialog

[h2]show(deprecated)

static show(options?: TextPickerDialogOptions)

Shows a text picker in the given settings.

This API is supported since API version 8 and deprecated since API version 18. You are advised to use showTextPickerDialog instead. showTextPickerDialog can be called only after a UIContext instance is obtained.

Since API version 10, you can use the showTextPickerDialog API in UIContext, which ensures that the text picker dialog box is shown in the intended UI instance.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

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.

Parameters

Name Type Mandatory Description
options TextPickerDialogOptions No Parameters of the text picker dialog box.

TextPickerDialogOptions

Inherits from TextPickerOptions.

System capability: SystemCapability.ArkUI.ArkUI.Full

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.

Name Type Read Only Optional Description
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.

Default value: 56 vp (selected) and 36 vp (unselected). The set value applies to both selected and unselected items.

Atomic service API: This API can be used in atomic services since API version 11.
disappearTextStyle10+ PickerTextStyle No Yes

Text color, font size, and font weight of edge items (the second item above or below the selected item).

Default value:

{

color: '#ff182431',

font: {

size: '14fp',

weight: FontWeight.Regular

}

}

Atomic service API: This API can be used in atomic services since API version 11.
textStyle10+ PickerTextStyle No Yes

Text color, font size, and font weight of candidate items (the first item immediately above or below the selected item).

Default value:

{

color: '#ff182431',

font: {

size: '16fp',

weight: FontWeight.Regular

}

}

Atomic service API: This API can be used in atomic services since API version 11.
selectedTextStyle10+ PickerTextStyle No Yes

Text color, font size, and font weight of the selected item.

Default value:

{

color: '#ff007dff',

font: {

size: '20fp',

weight: FontWeight.Medium

}

}

Atomic service API: This API can be used in atomic services since API version 11.
acceptButtonStyle12+ PickerDialogButtonStyle No Yes

Style of the accept button.

NOTE

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.

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, the displayed effect is still a capsule button (Capsule).

Atomic service API: This API can be used in atomic services since API version 12.
cancelButtonStyle12+ PickerDialogButtonStyle No Yes

Style of the cancel button.

NOTE

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.

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, the displayed effect is still a capsule button (Capsule).

Atomic service API: This API can be used in atomic services since API version 12.
canLoop10+ boolean No Yes

Whether to enable loop scrolling.

- true: Enable loop scrolling.

- false: Disable loop scrolling.

Default value: true.

Atomic service API: This API can be used in atomic services since API version 11.
alignment10+ DialogAlignment No Yes

Alignment mode of the dialog box in the vertical direction.

Default value: DialogAlignment.Default

Atomic service API: This API can be used in atomic services since API version 11.
offset10+ Offset No Yes

Offset of the dialog box based on the alignment settings.

Default value: { dx: 0 , dy: 0 }

Atomic service API: This API can be used in atomic services since API version 11.
maskRect10+ Rectangle No Yes

Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.

Default value: { x: 0, y: 0, width: '100%', height: '100%' }

Atomic service API: This API can be used in atomic services since API version 11.
onAccept (value: TextPickerResult) => void No Yes

Triggered when the OK button in the dialog box is clicked.

Atomic service API: This API can be used in atomic services since API version 11.
onCancel () => void No Yes

Triggered when the Cancel button in the dialog box is clicked.

Atomic service API: This API can be used in atomic services since API version 11.
onChange (value: TextPickerResult) => void No Yes

Triggered when the text picker in the dialog box snaps to the selected item.

This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use onEnterSelectedArea instead.

Atomic service API: This API can be used in atomic services since API version 11.
onScrollStop14+ Callback<TextPickerResult> No Yes

Triggered when the scrolling in the text picker of the dialog box stops.

Atomic service API: This API can be used in atomic services since API version 14.
backgroundColor11+ ResourceColor No Yes

Backplane color of the dialog box.

Default value: Color.Transparent

NOTE

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.

Atomic service API: This API can be used in atomic services since API version 12.
backgroundBlurStyle11+ BlurStyle No Yes

Background blur style of the dialog box.

Default value: BlurStyle.COMPONENT_ULTRA_THICK

NOTE

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.

Atomic service API: This API can be used in atomic services since API version 12.
backgroundBlurStyleOptions19+ BackgroundBlurStyleOptions No Yes

Options for customizing the background blur style.

Atomic service API: This API can be used in atomic services since API version 19.
backgroundEffect19+ BackgroundEffectOptions No Yes

Options for customizing the background effect.

Atomic service API: This API can be used in atomic services since API version 19.
onDidAppear12+ () => void No Yes

Event callback after the dialog box appears.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

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.

3. If the user closes the dialog box immediately after it appears, onWillDisappear is invoked before onDidAppear.

4. If the dialog box is closed before its entrance animation is finished, this callback is not invoked.

Atomic service API: This API can be used in atomic services since API version 12.
onDidDisappear12+ () => void No Yes

Event callback after the dialog box disappears.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

Atomic service API: This API can be used in atomic services since API version 12.
onWillAppear12+ () => void No Yes

Event callback when the dialog box is about to appear.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

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.

Atomic service API: This API can be used in atomic services since API version 12.
onWillDisappear12+ () => void No Yes

Event callback when the dialog box is about to disappear.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

2. If the user closes the dialog box immediately after it appears, onWillDisappear is invoked before onDidAppear.

Atomic service API: This API can be used in atomic services since API version 12.
shadow12+ ShadowOptions | ShadowStyle No Yes

Shadow of the dialog box.

Default value on 2-in-1 devices: ShadowStyle.OUTER_FLOATING_MD when the dialog box is focused and ShadowStyle.OUTER_FLOATING_SM otherwise

Atomic service API: This API can be used in atomic services since API version 12.
enableHoverMode14+ boolean No Yes

Whether to respond when the device is in semi-folded mode.

- true: Respond when the device is in semi-folded mode.

- false: Do not respond when the device is in semi-folded mode.

Default value: false.

Atomic service API: This API can be used in atomic services since API version 14.
hoverModeArea14+ HoverModeAreaType No Yes

Display area of the dialog box when the device is in semi-folded mode.

Default value: HoverModeAreaType.BOTTOM_SCREEN

Atomic service API: This API can be used in atomic services since API version 14.
disableTextStyleAnimation15+ boolean No Yes

Whether to disable the animation effect of text style changes during scrolling.

- true: Disable the animation effect of text style changes.

- false: Do not disable the animation effect of text style changes.

Default value: false.

NOTE

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. If defaultTextStyle is not set, the default style of the Text component is used.

Atomic service API: This API can be used in atomic services since API version 15.
defaultTextStyle15+ TextPickerTextStyle 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.

Default value: same as the default value of the Text component

Atomic service API: This API can be used in atomic services since API version 15.
onEnterSelectedArea18+ Callback<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.

NOTE

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.

Atomic service API: This API can be used in atomic services since API version 18.
enableHapticFeedback18+ boolean No Yes

Whether to enable haptic feedback.

- true: Enable haptic feedback.

- false: Disable haptic feedback.

Default value: true.

Atomic service API: This API can be used in atomic services since API version 18.

NOTE

1. Whether this parameter takes effect after being set to true depends on hardware support.

2. To enable haptic feedback, you must declare the following permission under requestPermissions in module in src/main/module.json5 of the project.

"requestPermissions": [{"name": "ohos.permission.VIBRATE"}]
selectedBackgroundStyle20+ PickerBackgroundStyle No Yes

Background color of the selected item.

Default value:

{

color: $r('sys.color.comp_background_tertiary'),

borderRadius: $r('sys.float.corner_radius_level12')

}

Atomic service API: This API can be used in atomic services since API version 20.

TextPickerDialogOptionsExt20+

Inherits from TextPickerOptions.

Atomic service API: This API can be used in atomic services since API version 20.

System capability: SystemCapability.ArkUI.ArkUI.Full

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.

Name Type Read Only Optional Description
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.

Default value: 56 vp (selected) and 36 vp (unselected). The set value applies to both selected and unselected items.
acceptButtonStyle PickerDialogButtonStyle No Yes

Style of the accept button.

NOTE

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.

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, the displayed effect is still a capsule button (Capsule).
cancelButtonStyle PickerDialogButtonStyle No Yes

Style of the cancel button.

NOTE

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.

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, the displayed effect is still a capsule button (Capsule).
canLoop boolean No Yes

Whether to enable loop scrolling.

- true: Enable loop scrolling.

- false: Disable loop scrolling.

Default value: true.
alignment DialogAlignment No Yes

Alignment mode of the dialog box in the vertical direction.

Default value: DialogAlignment.Default
offset Offset No Yes

Offset of the dialog box based on the alignment settings.

Default value: { dx: 0 , dy: 0 }
maskRect Rectangle No Yes

Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.

Default value: { x: 0, y: 0, width: '100%', height: '100%' }
onAccept Callback<TextPickerResult> No Yes Triggered when the OK button in the dialog box is clicked.
onCancel VoidCallback No Yes Triggered when the Cancel button in the dialog box is clicked.
onChange Callback<TextPickerResult> No Yes

Triggered when the text picker in the dialog box snaps to the selected item.

This callback is triggered only after the scroll animation completes. To obtain real-time index changes, use onEnterSelectedArea instead.
onScrollStop Callback<TextPickerResult> No Yes Triggered when the scrolling in the text picker of the dialog box stops.
backgroundColor ResourceColor No Yes

Backplane color of the dialog box.

Default value: Color.Transparent

NOTE

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.
backgroundBlurStyle BlurStyle No Yes

Background blur style of the dialog box.

Default value: BlurStyle.COMPONENT_ULTRA_THICK

NOTE

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.
backgroundBlurStyleOptions BackgroundBlurStyleOptions No Yes

Options for customizing the background blur style.

Atomic service API: This API can be used in atomic services since API version 20.
backgroundEffect BackgroundEffectOptions No Yes Options for customizing the background effect.
onDidAppear VoidCallback No Yes

Event callback after the dialog box appears.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

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.

3. If the user closes the dialog box immediately after it appears, onWillDisappear is invoked before onDidAppear.

4. If the dialog box is closed before its entrance animation is finished, this callback is not invoked.
onDidDisappear VoidCallback No Yes

Event callback after the dialog box disappears.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.
onWillAppear VoidCallback No Yes

Event callback when the dialog box is about to appear.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

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.
onWillDisappear VoidCallback No Yes

Event callback when the dialog box is about to disappear.

NOTE

1. The normal timing sequence is as follows: onWillAppear > onDidAppear > (onAccept/onCancel/onChange/onScrollStop) > onWillDisappear > onDidDisappear.

2. If the user closes the dialog box immediately after it appears, onWillDisappear is invoked before onDidAppear.
shadow ShadowOptions | ShadowStyle No Yes

Shadow of the dialog box.

Default value on 2-in-1 devices: ShadowStyle.OUTER_FLOATING_MD when the dialog box is focused and ShadowStyle.OUTER_FLOATING_SM otherwise
enableHoverMode boolean No Yes

Whether to respond when the device is in semi-folded mode.

- true: Respond when the device is in semi-folded mode.

- false: Do not respond when the device is in semi-folded mode.

Default value: false
hoverModeArea HoverModeAreaType No Yes

Display area of the dialog box when the device is in semi-folded mode.

Default value: HoverModeAreaType.BOTTOM_SCREEN
disableTextStyleAnimation boolean No Yes

Whether to disable the animation effect of text style changes during scrolling.

- true: Disable the animation effect of text style changes.

- false: Do not disable the animation effect of text style changes.

Default value: false.

NOTE

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. If defaultTextStyle is not set, the default style of the Text component is used.
defaultTextStyle TextPickerTextStyle 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.

Default value: same as the default value of the Text component
onEnterSelectedArea Callback<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.

NOTE

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.
enableHapticFeedback boolean No Yes

Whether to enable haptic feedback.

- true: Enable haptic feedback.

- false: Disable haptic feedback.

Default value: true.

NOTE

1. Whether this parameter takes effect after being set to true depends on hardware support.

2. To enable haptic feedback, you must declare the following permission under requestPermissions in module in src/main/module.json5 of the project.

"requestPermissions": [{"name": "ohos.permission.VIBRATE"}]
selectedBackgroundStyle PickerBackgroundStyle No Yes

Background color of the selected item.

Default value:

{

color: $r('sys.color.comp_background_tertiary'),

borderRadius: $r('sys.float.corner_radius_level12')

}
disappearTextStyle TextPickerTextStyle No Yes

Style of edge items (the second item above or below the selected item), covering the following: text color, font size, font weight, maximum font size, minimum font size, text overflow mode.

Default value:

{

color: '#ff182431',

font: {

size: '14fp',

weight: FontWeight.Regular

},

minFontSize: 0,

maxFontSize: 0,

overflow: TextOverflow.CLIP

}
textStyle TextPickerTextStyle No Yes

Style of candidate items (the first item immediately above or below the selected item), covering the following: text color, font size, font weight, maximum font size, minimum font size, text overflow mode.

Default value:

{

color: '#ff182431',

font: {

size: '16fp',

weight: FontWeight.Regular

},

minFontSize: 0,

maxFontSize: 0,

overflow: TextOverflow.CLIP

}
selectedTextStyle TextPickerTextStyle 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.

Default value:

{

color: '#ff007dff',

font: {

size: '20fp',

weight: FontWeight.Medium

},

minFontSize: 0,

maxFontSize: 0,

overflow: TextOverflow.CLIP

}

TextPickerResult

Represents the selection result of a TextPicker component.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

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.

Name Type Read Only Optional Description
value string | string []10+ No No

Text of the selected item.

NOTE

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.)

For an image list, value is empty.

The value cannot contain the following escape character: \
index number | number []10+ 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.)

Example

For clarity in UI execution context, you are advised to use the showTextPickerDialog API in UIContext.

[h2]Example 1: Displaying a Text Picker Dialog Box

This example demonstrates how to display a text picker dialog box when a button is touched.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              value: this.selectedValue,
              defaultPickerItemHeight: 40,
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              },
              onCancel: () => {
                console.info('TextPickerDialog:onCancel()');
              },
              onChange: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
              },
              onScrollStop: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onScrollStop()' + JSON.stringify(value));
              },
              onDidAppear: () => {
                console.info('TextPickerDialog:onDidAppear()');
              },
              onDidDisappear: () => {
                console.info('TextPickerDialog:onDidDisappear()');
              },
              onWillAppear: () => {
                console.info('TextPickerDialog:onWillAppear()');
              },
              onWillDisappear: () => {
                console.info('TextPickerDialog:onWillDisappear()');
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 2: Customizing the Style

In this example, disappearTextStyle, textStyle, selectedTextStyle, acceptButtonStyle, and cancelButtonStyle are configured to customize the text and button style.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              disappearTextStyle: { color: '#297bec', font: { size: 15, weight: FontWeight.Lighter } },
              textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } },
              selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } },
              acceptButtonStyle: {
                type: ButtonType.Normal,
                style: ButtonStyleMode.NORMAL,
                role: ButtonRole.NORMAL,
                fontColor: 'rgb(81, 81, 216)',
                fontSize: '26fp',
                fontWeight: FontWeight.Bolder,
                fontStyle: FontStyle.Normal,
                fontFamily: 'sans-serif',
                backgroundColor: '#A6ACAF',
                borderRadius: 20
              },
              cancelButtonStyle: {
                type: ButtonType.Normal,
                style: ButtonStyleMode.NORMAL,
                role: ButtonRole.NORMAL,
                fontColor: Color.Blue,
                fontSize: '16fp',
                fontWeight: FontWeight.Normal,
                fontStyle: FontStyle.Italic,
                fontFamily: 'sans-serif',
                backgroundColor: '#50182431',
                borderRadius: 10
              },
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              },
              onCancel: () => {
                console.info('TextPickerDialog:onCancel()');
              },
              onChange: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
              },
              onScrollStop: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onScrollStop()' + JSON.stringify(value));
              },
              onDidAppear: () => {
                console.info('TextPickerDialog:onDidAppear()');
              },
              onDidDisappear: () => {
                console.info('TextPickerDialog:onDidDisappear()');
              },
              onWillAppear: () => {
                console.info('TextPickerDialog:onWillAppear()');
              },
              onWillDisappear: () => {
                console.info('TextPickerDialog:onWillDisappear()');
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 3: Configuring a Dialog Box in the Hover State

This example demonstrates how to set the layout area of a dialog box when the device is in semi-folded mode.

@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter }},
              textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal }},
              selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder }},
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              },
              onCancel: () => {
                console.info('TextPickerDialog:onCancel()');
              },
              onChange: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
              },
              onScrollStop: (value: TextPickerResult) => {
                console.info('TextPickerDialog:onScrollStop()' + JSON.stringify(value));
              },
              onDidAppear: () => {
                console.info('TextPickerDialog:onDidAppear()');
              },
              onDidDisappear: () => {
                console.info('TextPickerDialog:onDidDisappear()');
              },
              onWillAppear: () => {
                console.info('TextPickerDialog:onWillAppear()');
              },
              onWillDisappear: () => {
                console.info('TextPickerDialog:onWillDisappear()');
              },
              enableHoverMode: true,
              hoverModeArea: HoverModeAreaType.TOP_SCREEN
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 4: Setting the Dialog Box Position

This example demonstrates how to set the position of a dialog box using alignment and offset.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              alignment: DialogAlignment.Center,
              offset: { dx: 20, dy: 0 },
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 5: Setting the Mask Area

This example demonstrates how to set the mask area using maskRect.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              maskRect: {
                x: 30,
                y: 60,
                width: '100%',
                height: '60%'
              },
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 6: Setting the Background

This example demonstrates how to set the dialog box background using backgroundColor, backgroundBlurStyle, and shadow.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              backgroundColor: 'rgb(204, 226, 251)',
              backgroundBlurStyle: BlurStyle.NONE,
              shadow: ShadowStyle.OUTER_FLOATING_SM,
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 7: Setting Cyclic Scrolling

This example demonstrates how to set whether to enable cyclic scrolling using canLoop.

// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
  private select: number | number[] = 0;
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5'];
  @State selectedValue: string = '';

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog:' + this.selectedValue)
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.fruits,
              selected: this.select,
              value: this.selectedValue,
              canLoop: false,
              onAccept: (value: TextPickerResult) => {
                // 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.
                this.select = value.index;
                console.info(this.select + '');
                // After OK is clicked, the selected item is displayed on the page.
                this.selectedValue = value.value as string;
                console.info('TextPickerDialog:onAccept()' + JSON.stringify(value));
              }
            });
          })
      }.width('100%')
    }.height('100%')
  }
}

[h2]Example 8: Setting the Background Style of the Selected Item

This example shows how to set the background style of the selected item by configuring selectedBackgroundStyle.

Since API version 20, the selectedBackgroundStyle attribute is added for TextPickerDialogOptions.

// xxx.ets
@Entry
@Component
struct TextPickerExample {
  private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1']
  build() {
    Column() {
      Row() {
        Button('TextPickerDialog')
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.showText1,
              selectedBackgroundStyle: {
                borderRadius: {
                  topLeft:15,
                  topRight:15,
                  bottomLeft:15,
                  bottomRight:15
                },
                color: 'FFC3C3C3'
              }
            })
          })
      }
    }.height('100%')
  }
}

[h2]Example 9: Customizing the Background Blur Effect

This example demonstrates how to customize the background blur effect by configuring backgroundBlurStyleOptions. This functionality is supported since API version 19.

@Entry
@Component
struct TextPickerExample {
  private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1']

  build() {
    Stack({ alignContent: Alignment.Top }) {
      // Replace $r('app.media.bg') with the image resource file you use.
      Image($r('app.media.bg'))
      Column() {
        Button('TextPickerDialog')
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.showText1,
              backgroundColor: undefined,
              backgroundBlurStyle: BlurStyle.Thin,
              backgroundBlurStyleOptions: {
                colorMode: ThemeColorMode.LIGHT,
                adaptiveColor: AdaptiveColor.AVERAGE,
                scale: 1,
                blurOptions: { grayscale: [20, 20] },
              },
            })
          })
      }.width('100%')
    }
  }
}

[h2]Example 10: Customizing the Background Effect

This example demonstrates how to customize the background effect by configuring backgroundEffect. This functionality is supported since API version 19.

@Entry
@Component
struct TextPickerExample {
  private showText1: string [] = ['Text1', 'Text1', 'Text1', 'Text1']

  build() {
    Stack({ alignContent: Alignment.Top }) {
      // Replace $r('app.media.bg') with the image resource file you use.
      Image($r('app.media.bg'))
      Column() {
        Button('TextPickerDialog')
          .margin(20)
          .onClick(() => {
            this.getUIContext().showTextPickerDialog({
              range: this.showText1,
              backgroundColor: undefined,
              backgroundBlurStyle: BlurStyle.Thin,
              backgroundEffect: {
                radius: 60,
                saturation: 0,
                brightness: 1,
                color: Color.White,
                blurOptions: { grayscale: [20, 20] }
              },
            })
          })
      }.width('100%')
    }
  }
}