当前位置:   article > 正文

鸿蒙:文本滑动选择器弹窗

鸿蒙:文本滑动选择器弹窗

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

该组件从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. private select: number | 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. }

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/274936
推荐阅读
相关标签
  

闽ICP备14008679号