【HM】自定义组件——时间选择器（上下午、时分）原创

与辉鸿蒙

发布于 2024-11-10 11:54

浏览

2收藏

运行效果：
【HM】自定义组件——时间选择器（上下午、时分）-鸿蒙开发者社区
一、组件拆解
面向对象编程，蓝、绿、黄都是时间选择对象，可抽象定义为一个类；但每个对象又有各自的特点，蓝色是午时、绿色是12小时制、黄色是分，这些可以通过对象的属性区分。所以，可以给这个对象类定义三个属性：时间类型、当前选择的值和选项数据。
二、时间选择对象类
新建目录viewmodel，存放数据实体对象。右击目录viewmodel >> 新建 >> ArkTS File，文件命名为DayDataItem。
【HM】自定义组件——时间选择器（上下午、时分）-鸿蒙开发者社区
DayDataItem.ets就是时间选择对象类，并定义三个属性，代码如下：

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

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

三、定义时间选择项数据常量
新建一个类文件，是任务页面所用的常量对象。右击目录constants >> 新建 >> ArkTS File，文件命名为DetailConstant。
【HM】自定义组件——时间选择器（上下午、时分）-鸿蒙开发者社区
定义一个时间常量数组DAY_DATA，数组项就是DayDataItem对象，包括上述的三类时间：上下午、小时和分钟。代码如下：

export class DetailConstant {
  /**
   * 当天的时间选择项
   */
  static readonly DAY_DATA: DayDataItem[] = [
    { timeType: 0, delSelect: 0, data: ["上午", "下午"] } as DayDataItem,
    { timeType: 1, delSelect: 0, data:
    ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
    } as DayDataItem,
    { timeType: 2, delSelect: 0, data:
    ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12',
      '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24',
      '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36',
      '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48',
      '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59', '00',
    ]
    } as DayDataItem
  ];
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

四、时间选择器组件
新建组件文件，右击目录component >> 新建 >> ArkTS File，文件命名为DateSelector。
【HM】自定义组件——时间选择器（上下午、时分）-鸿蒙开发者社区
组件采用层叠布局Stack，在Row行容器内包括TextPicker文本选择器组件，通过遍历常量数组DAY_DATA，每个数组项是一个TextPicker，从左到右分别是上下午、时和分。DateSelector.ets代码如下：

import SizeUtil from '../utils/SizeUtil'
import DayDataItem from '../viewmodel/DayDataItem'
/**
 *时间选择器
 */
@Component
export default struct DateSelector {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      Row() {
        ForEach(DetailConstant.DAY_DATA, (item: DayDataItem) => {
          TextPicker({ range: item.data, selected: item.delSelect })
            .backgroundColor($r('app.color.grey_light'))
            .layoutWeight(1)
            .onChange((value: string, index: number) => {
              item.delSelect = index;
            })
        }, (item: DayDataItem) => JSON.stringify(item))
      }
    }
    .height(SizeUtil.getVp($r('app.float.date_picker_height')))
    .padding({
      left: SizeUtil.getVp($r('app.float.date_picker_padding_horizon')),
      right: SizeUtil.getVp($r('app.float.date_picker_padding_horizon'))
    })
  }
}

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.

资源文件float.json增加了name项：

  "name": "date_picker_height",
  "value": "200"
},
{
  "name": "date_picker_padding_horizon",
  "value": "24"
}

1.
2.
3.
4.
5.
6.
7.
8.

关于层叠布局Stack，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-layout-development-stack-layout-0000001860295781
关于滑动选择文本内容组件TextPicker，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textpicker-0000001815927604

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

标签

51CTO

51CTO博客

51CTO学堂

【HM】自定义组件——时间选择器（上下午、时分）原创

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

【HM】自定义组件——时间选择器（上下午、时分） 原创

订阅鸿蒙技术特刊，精选内容抢先看

【HM】自定义组件——时间选择器（上下午、时分）原创