14. 快速上手！HarmonyOS4.0 （TextPicker_文本滑动选择器弹窗_TextTimer）组件详解

全栈若城

发布于 2024-06-23 10:53:40

1160

发布于 2024-06-23 10:53:40

文章被收录于专栏：若城技术专栏若城技术专栏

本章内容概要

TextPicker

滑动选择文本内容的组件。

参数

TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string}) 根据range指定的选择范围创建文本选择器。

参数名	参数类型	必填	参数描述
range	string[] \| Resource	是	选择器的数据选择列表。
selected	number	否	设置默认选中项在数组中的索引值。
默认值：0
value	string	否	设置默认选中项的值，优先级低于selected。
默认值：第一个元素值

代码案例

定义一个数组对象作为数据源

  @State pickLits: string[] = ['黄金糕','双皮奶','蚵仔煎'  ,'龙须面', '北京烤鸭']

TextPicker 简单运用案例

@Entry
@Component
struct TextPickerNote {
  @State pickLits: string[] = ['黄金糕','双皮奶','蚵仔煎'  ,'龙须面', '北京烤鸭']
@State TextPickerShow:boolean = false
  @State selectedItem:string = '黄金糕'
  build() {
    Row() {
      Column() {
          Stack(){
            Column(){
              Button('显示TextPicker').onClick(()=>{
                this.TextPickerShow = !this.TextPickerShow
              })
              Text(`你好,若城您选择的是: ${this.selectedItem}`).fontSize(25)
            }
          }
        Panel(this.TextPickerShow){
            TextPicker({range:this.pickLits, value:this.selectedItem}).onChange((value:string, index:number)=>{
                this.selectedItem = value
            })
        }.type(PanelType.Foldable).mode(PanelMode.Half)
      }
      .width('100%')
      .height('100%')

    }
    .height('100%')
    .width('100%')

  }
}

效果如下图

目前我们已经大致的了解了TextPicker的基本使用了，但在我们开发的过程中，经常用到的弹窗却是带有 确定和取消 按钮的，那么这种的组件如何开发呢？这里我们就要用到 文本滑动选择器弹窗 组件了。

文本滑动选择器弹窗

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

参数

TextPickerDialog.show show(options?: 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	否	滑动弹窗中的选择器使当前选中项改变时触发该回调。

代码案例

代码中我们主要使用的是 TextPickerDialog.show 这个方法，其中 onAccept 事件表示点击确认按钮， onCancel 事件表示点击取消按钮，点击确认按钮时 value 的对象TextPickerResult 如下：

名称	类型	描述
value	string	选中项的文本内容。
index	number	选中项在选择范围数组中的索引值。

当然此时依旧可以使用 onChange 事件

@Entry
@Component
struct TextPickerDialogNote {
  @State pickLits: string[] = ['黄金糕', '双皮奶', '蚵仔煎', '龙须面', '北京烤鸭']
  @State selectedItem: string = '黄金糕'

  build() {
    Row() {
      Column() {
        Button('TextPickerDialog').onClick(() => {
          TextPickerDialog.show({
            range: this.pickLits,
            value: this.selectedItem,
            onAccept: (value: TextPickerResult) => {
              this.selectedItem = value.value
            },
            onCancel: () => {
              this.selectedItem = ''
            }

          })
        })
        Text(`你好,若城您选择的是: ${this.selectedItem}`).fontSize(25)

      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .width('100%')
  }
}

效果展示

TimePicker

通过文本显示计时信息并控制其计时器状态的组件。

参数

TextTimer(options?: { isCountDown?: boolean, count?: number, controller?: TextTimerController })

参数名	参数类型	必填	参数描述
isCountDown	boolean	否	是否倒计时。
默认值：false
count	number	否	倒计时时间（isCountDown为true时生效），单位为毫秒。最长不超过86400000毫秒（24小时）。 0<count<86400000时，count值为倒计时初始值。否则，使用默认值为倒计时初始值。
默认值：60000
controller	TextTimerController	否	TextTimer控制器

属性

名称	参数类型	描述
format	string	自定义格式，需至少包含一个HH、mm、ss、SS中的关键字。如使用yy、MM、dd等日期格式，则使用默认值。
默认值：‘HH:mm:ss.SS’

TextTimer控制器

TextTimer控制器 需要导入对象

textTimerController: TextTimerController = new TextTimerController()

textTimerController 使用方法如下：

方法	含义
start()	计时开始
pause()	计时暂停
reset()	重置计时器

案例代码

@Entry
@Component
struct TimePickerNote {
  TimerController:TextTimerController = new TextTimerController()
//    设置时间格式
  @State format:string = 'mm:ss.SS'
  build() {
    Row() {
      Column({space:20}) {
        TextTimer({
          isCountDown:true,
          count:40000,
          controller:this.TimerController
        }).format(this.format)
          .fontSize(20)

        Button('开始计时').onClick(()=>{
           this.TimerController.start()
        })
        Button('计时暂停').onClick(()=>{
          this.TimerController.pause()
        })

        Button('重置').onClick(()=>{
          this.TimerController.reset()
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}