【鸿蒙开发】第13课，TextPicker、TextTimer、TimePicker组件

1 TextPicker 组件，文本选择交互利器

在HarmonyOS应用中，TextPicker 组件是选项选择功能控件，适用于需要用户从预定义文本列表中选择内容的场景。

typescript 复制代码

@Entry
@Component
struct TextPickerDemo {
  @State private options: string[] = ['Apple', 'Banana', 'Orange'];
  @State private selectedFruit: string = 'Apple';

  build() {
    Column() {
      Text('当前选择: ' + this.selectedFruit)
        .fontSize(16)
        .margin(5)

      TextPicker(
        { range: this.options })
        .canLoop(true)
        .onChange((value, index) => {
          this.selectedFruit = index.toString() + ", " + value.toString();
        })
        .width('90%')
        .margin(10)
    }
    .width('100%')
  }
}

2 TextTimer 组件,动态文本计时器

在HarmonyOS应用中，TextTimer 是一种结合文本显示与定时更新功能的智能组件，适用于需要动态展示时间、倒计时或周期性刷新内容的场景。

2.1 TextTimer 组件概述

定义：
TextTimer 是 Text 组件与定时器逻辑的集成，支持以下两种模式：

倒计时模式：从指定时间开始递减（如活动倒计时）
正计时模式：从0开始递增（如运行时间统计）

典型应用场景：

限时活动倒计时（如秒杀、优惠券过期提醒）
实时时间显示（如动态时钟、耗时统计）
周期性状态更新（如验证码倒计时、进度刷新）

2.2 代码实现示例

typescript 复制代码

// 导入鸿蒙系统的提示操作模块
import promptAction from '@ohos.promptAction';

// 声明组件入口装饰器，标记这是页面入口组件
@Entry
// 声明组件装饰器，定义组件结构
@Component
struct TextTimerDemo {
  // 定义倒计时总时长（5000毫秒=5秒）
  private countdownDuration: number = 5000;
  
  // 使用@State装饰器声明响应式状态变量，控制计时器运行状态
  @State private isRunning: boolean = false;
  // 存储UTC时间戳的响应式状态变量
  @State private utc: number = 0;
  // 存储已流逝时间的响应式状态变量
  @State private elapsedTime: number = 0;

  // 创建三个独立的文本计时器控制器实例
  private textTimerController1 = new TextTimerController()
  private textTimerController2 = new TextTimerController()
  private textTimerController3 = new TextTimerController()

  // 构建UI布局的方法
  build() {
    // 使用Column布局容器包裹所有子组件
    Column() {
      // 显示"活动倒计时"标题文本
      Text('活动倒计时:')
        .fontSize(18)          // 设置字体大小18px
        .margin(5)             // 设置外边距5px

      // 第一个倒计时器（格式：秒数）
      TextTimer({
        isCountDown: true,     // 设置为倒计时模式
        count: this.countdownDuration, // 设置总时长
        controller: this.textTimerController1 // 绑定控制器
      })
      .onTimer((utc, elapsedTime) => { // 计时器更新回调
        this.utc = utc         // 更新UTC时间戳
        this.elapsedTime = elapsedTime // 更新已流逝时间
        // 当已流逝时间超过总时长时显示提示
        if (elapsedTime * 10 >= this.countdownDuration) {
          promptAction.showToast({ message: "倒计时完成" })
        }
      })
      .fontSize(24)            // 设置字体大小24px
      .fontWeight(FontWeight.Bold) // 设置加粗字体
      .margin(10)              // 设置外边距10px

      // 第二个倒计时器（格式：分:秒）
      TextTimer({
        isCountDown: true,
        count: this.countdownDuration,
        controller: this.textTimerController2
      })
      .format('mm:ss')         // 设置时间格式为分:秒
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .margin(10)

      // 控制计时器的开始/暂停按钮
      Button(this.isRunning ? '暂停' : '开始')
        .onClick(() => {
          if (this.isRunning) {
            this.isRunning = false
            // 同时暂停三个计时器
            this.textTimerController1.pause()
            this.textTimerController2.pause()
            this.textTimerController3.pause()
          } else {
            this.isRunning = true
            // 同时启动三个计时器
            this.textTimerController1.start()
            this.textTimerController2.start()
            this.textTimerController3.start()
          }
        })

      // 显示UTC时间戳
      Text('utc: ' + this.utc)
        .fontSize(14)
        .margin(5)
      
      // 显示已流逝时间
      Text('elapsedTime: ' + this.elapsedTime)
        .fontSize(14)
        .margin(5)

      // 添加分割线
      Divider()

      // 正计时器标题
      Text('活动正计时:')
        .fontSize(18)
        .margin(5)

      // 正计时器（不会自动停止）
      TextTimer({
        isCountDown: false,    // 设置为正计时模式
        count: this.countdownDuration, // 此处count参数在正计时模式下无效
        controller: this.textTimerController3
      })
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .margin(10)
    }
    .width('100%') // 设置容器宽度为100%
  }
}

3 TimePicker 组件，时间选择利器

在HarmonyOS应用中，TimePicker 是一种提供时间选择功能的交互式组件，支持灵活的时间格式配置和高度可定制的外观。

typescript 复制代码

@Entry
@Component
struct TimePickerDemo {
  @State private selectedDate: Date = new Date()
  @State private timePickerResult: string = ""

  build() {
    Column() {
      Text('选择预约时间' + this.timePickerResult)
        .fontSize(18)
        .margin(5)

      TimePicker({ selected: this.selectedDate, format: TimePickerFormat.HOUR_MINUTE_SECOND })
        .loop(true)
        .useMilitaryTime(true)
        .onChange((timePickerResult) => {
          this.timePickerResult = "=" + timePickerResult.hour + ":" + timePickerResult.minute + ":" + timePickerResult.second
        })
        .margin(10)
        .width(300)
        .height(200)
    }
    .width('100%')
  }
}