鸿蒙Next时间卡尺demo示例代码分享

大家好，我在学习鸿蒙Next的时间卡尺组件时遇到一些问题，想请教一下。我在使用示例代码时发现时间卡尺的滑动效果不太流畅，有时候会出现卡顿现象。不知道是不是我的实现方式有问题？另外，时间卡尺的自定义样式该怎么修改，比如修改刻度颜色和字体大小？如果有更完整的demo代码可以参考就更好了，谢谢！

2 回复

以下是一个简单的鸿蒙Next时间卡尺（TimePicker）Demo示例：

import { TimePicker } from '@kit.ArkUI';

@Entry
@Component
struct TimePickerExample {
  [@State](/user/State) selectedTime: Date = new Date()

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime
      })
      .onChange((value: Date) => {
        this.selectedTime = value
        console.info('Selected time:' + value.toLocaleTimeString())
      })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

代码说明：

  1. 导入TimePicker组件
  2. 创建带@State装饰器的selectedTime状态变量
  3. TimePicker绑定选中时间
  4. 通过onChange监听时间变化
  5. 控制台输出选中时间

运行效果：

  • 显示时间选择器界面
  • 滑动选择时/分
  • 选择结果实时更新到selectedTime
  • 控制台打印选中时间

记得在module.json5中添加相应权限。这个Demo展示了最基本的时间选择功能，实际使用时可根据需求定制样式和交互。

更多关于鸿蒙Next时间卡尺demo示例代码分享的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


以下是一个基于HarmonyOS Next的时间卡尺（TimePicker）组件示例代码，使用ArkTS语言实现：

import { TimePicker } from '@ohos.arkui.advanced.TimePicker';
import { BusinessError } from '@ohos.base';

@Entry
@Component
struct TimePickerExample {
  @State selectedTime: string = '00:00:00';

  build() {
    Column() {
      // 显示当前选择的时间
      Text(`选择的时间: ${this.selectedTime}`)
        .fontSize(20)
        .margin(20)

      // 时间选择器组件
      TimePicker({
        selected: this.selectedTime
      })
        .onChange((value: string) => {
          this.selectedTime = value;
          console.info(`时间已变更为: ${value}`);
        })
        .width('80%')
        .margin(10)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

代码说明：

  1. 使用 @Entry 和 @Component 装饰器定义组件
  2. 通过 @State 装饰器管理选中时间状态
  3. TimePicker 组件：
    • selected 属性绑定当前选中时间
    • onChange 事件监听时间变化
    • 支持设置宽度和边距

功能特性：

  • 提供时分秒选择界面
  • 支持24小时制
  • 实时返回格式为 “HH:mm:ss” 的时间字符串
  • 自动响应时间变化更新显示

注意：实际开发时请确保在 module.json5 中声明所需权限，并根据API版本调整导入路径。

回到顶部