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

本章内容概要

TextPicker

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

参数

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

代码案例

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

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

1
2

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%')

  }
}

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
29
30
31
32
33

效果如下图

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

文本滑动选择器弹窗

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

参数

TextPickerDialog.show
show(options?: TextPickerDialogOptions)
定义文本滑动选择器弹窗并弹出。

代码案例

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

当然此时依旧可以使用 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%')
  }
}

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
29
30
31
32
33

效果展示

TimePicker

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

参数

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

属性

TextTimer控制器

TextTimer控制器 需要导入对象

textTimerController: TextTimerController = new TextTimerController()
1

textTimerController 使用方法如下 ：

案例代码

@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%')
  }
}

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
29
30
31
32
33

效果演示