【时间盒子】-【8.时间选择器】自定义上下午、时分选择器组件

最新推荐文章于 2025-11-12 09:49:13 发布

原创

最新推荐文章于 2025-11-12 09:49:13 发布 · 623 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#HarmonyOS Next #DevEco Studio #鸿蒙 #元服务 #华为

Tips：

层叠布局Stack；

滑动选择文本组件TextPicker；

运行效果：

一、组件拆解

面向对象编程，蓝、绿、黄都是时间选择对象，可抽象定义为一个类；但每个对象又有各自的特点，蓝色是午时、绿色是12小时制、黄色是分，这些可以通过对象的属性区分。所以，可以给这个对象类定义三个属性：时间类型、当前选择的值和选项数据。

二、时间选择对象类

新建目录viewmodel，存放数据实体对象。右击目录viewmodel >> 新建 >> ArkTS File，文件命名为DayDataItem。

DayDataItem.ets就是时间选择对象类，并定义三个属性，代码如下：

/*
 * 时间选择对象
 */
export default class DayDataItem {
  /**
   * 时间类型
   */
  timeType: number = 0;
  
  /**
   * 当前所选项的索引值
   */
  delSelect: number = 0;
  
  /**
   * 选项数据
   */
  data: Array<string> = [];
}