HarmonyOS 鸿蒙Next实现时间卡尺功能鸿蒙示例代码

HarmonyOS 鸿蒙Next实现时间卡尺功能鸿蒙示例代码

介绍

本示例基于Canvas绘制一个时间卡尺UI组件，滑动卡尺，时间随之发生改变。

实现时间卡尺功能源码链接

效果预览

图片名称

使用说明

  1. 运行demo，进入首页
  2. 左右滑动时间卡尺

实现思路

利用Canvas绘制时间卡尺

Canvas(this.scalePaint)
  .width('100%')
  .height('100%')
  .onReady(() => {
    // 初始化画笔，绘制刻度
    this.scalePaint.lineWidth = this.model.scaleWidth
    this.scalePaint.font = "36px"
    this.scalePaint.fillStyle = "#666"
    this.scalePaint.strokeStyle = "#666"
    this.model.setScaleContext2D(this.scalePaint)
    this.model.drawScales()
  })
  .onAreaChange((_oldArea: Area, newArea: Area) => {
    this.model.onChartSizeChanged(Number(newArea.width), Number(newArea.height))
  })// 绑定组合手势，包括滑动，拖动，捏合手势，并行识别
    // 并行识别组合手势中注册的手势将同时进行识别，直到所有手势识别结束。
    // 并行识别手势组合中的手势进行识别时互不影响
  .gesture(
    GestureGroup(
      GestureMode.Parallel,
      // 第一个滑动手势，必须在拖动手势之前，否则无法识别成功
      // SwipeGesture({ direction: SwipeDirection.Horizontal }).onAction((event: GestureEvent) => {
      //   this.model.onViewSwipe(event)
      // }),
      PanGesture()
        .onActionStart((event: GestureEvent) => {
          this.model.onPanActionStart(event)
        })
        .onActionUpdate((event: GestureEvent) => {
          this.model.onPanActionUpdate(event)
        })
        .onActionEnd((event: GestureEvent) => {
          this.model.onPanActionEnd(event)
        }),
      PinchGesture()
        .onActionStart((event: GestureEvent) => {
          this.model.onPinchActionStart(event)
        })
        .onActionUpdate((event: GestureEvent) => {
          this.model.onPinchActionUpdate(event)
        })
        .onActionEnd((event: GestureEvent) => {
          this.model.onPinchActionEnd(event)
        }),
    )
  )

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

1 回复

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


在HarmonyOS中实现时间卡尺功能，可以使用TimePicker组件来选择和显示时间。以下是一个简单的示例代码，展示了如何在鸿蒙Next中实现时间卡尺功能：

import { TimePicker, TimePickerResult } from '@ohos.common';
import { ui } from '@ohos.arkui';

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

  build() {
    Column() {
      Text(`Selected Time: ${this.selectedTime}`)
        .fontSize(20)
        .margin({ bottom: 20 });

      TimePicker({
        useMilitaryTime: false, // 使用12小时制
        onTimeChanged: (result: TimePickerResult) => {
          this.selectedTime = `${result.hour}:${result.minute}`;
        }
      })
      .width('100%')
      .height(200)
      .margin({ top: 20 });
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center);
  }
}

在这个示例中，TimePicker组件用于选择时间，并通过onTimeChanged回调函数获取用户选择的时间。selectedTime状态变量用于存储并显示用户选择的时间。useMilitaryTime属性设置为false表示使用12小时制，若设置为true则使用24小时制。

该代码可以在鸿蒙Next的开发环境中运行，并实现一个简单的时间选择功能。

回到顶部