文本滑动选择器弹窗

2024-01-22 18:22 更新

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

说明

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

TextPickerDialog.show

show(options?: TextPickerDialogOptions)

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

TextPickerDialogOptions参数:

参数名

参数类型

必填

参数描述

range

string[] | Resource

设置文本选择器的选择范围。

selected

number

设置选中项的索引值。

默认值:0

value

string

设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。

defaultPickerItemHeight

number | string

设置选择器中选项的高度。

onAccept

(value: TextPickerResult) => void

点击弹窗中的“确定”按钮时触发该回调。

onCancel

() => void

点击弹窗中的“取消”按钮时触发该回调。

onChange

(value: TextPickerResult) => void

滑动弹窗中的选择器使当前选中项改变时触发该回调。

TextPickerResult对象说明

名称

类型

描述

value

string

选中项的文本内容。

index

number

选中项在选择范围数组中的索引值。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TextPickerDialogExample {
  5. @State select: number = 2
  6. private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
  7. build() {
  8. Row() {
  9. Column() {
  10. Button("TextPickerDialog")
  11. .margin(20)
  12. .onClick(() => {
  13. TextPickerDialog.show({
  14. range: this.fruits,
  15. selected: this.select,
  16. onAccept: (value: TextPickerResult) => {
  17. // 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项
  18. this.select = value.index
  19. console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
  20. },
  21. onCancel: () => {
  22. console.info("TextPickerDialog:onCancel()")
  23. },
  24. onChange: (value: TextPickerResult) => {
  25. console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
  26. }
  27. })
  28. })
  29. }.width('100%')
  30. }.height('100%')
  31. }
  32. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号