文本滑动选择器弹窗


文本滑动选择器弹窗

icon-note.gif 说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

根据指定的选择范围创建文本选择器,展示在弹窗上。

权限列表

TextPickerDialog.show

show(options: TextPickerDialogOptions)

定义文本滑动选择器弹窗并弹出。

  • TextPickerDialogOptions参数

    参数名 参数类型 必填 默认值 参数描述
    range string[] - 选择器的数据选择范围。
    selected number 第一个元素 选中项在数组中的index值。
    defaultPickerItemHeight number - 默认Picker内容项元素高度。
    onAccept (value: TextPickerResult) => void - 点击弹窗中确定按钮时触发。
    onCancel () => void - 点击弹窗中取消按钮时触发。
    onChange (value: TextPickerResult) => void - 滑动选择器,当前选择项改变时触发。
  • TextPickerResult对象说明

    名称 参数类型 描述
    value string 选中项文本。
    index number 选中项在数组中的index值。

示例

@Entry
@Component
struct TextPickerDialogExample {
  @State select: number = 1
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center }) {
      Button("TextPickerDialog").onClick(() => {
        TextPickerDialog.show({
          range: this.fruits,
          selected: this.select,
          onAccept: (value: TextPickerResult) => {
            console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
            this.select = value.index
          },
          onCancel: () => {
            console.info("TextPickerDialog:onCancel()")
          },
          onChange: (value: TextPickerResult) => {
            console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
          }
        })
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28