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

Tips：
层叠布局Stack：请参考官方文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5
滑动选择文本组件TextPicker：请参考官方文档 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-textpicker-V5
运行效果：

一、组件拆解
面向对象编程，蓝、绿、黄都是时间选择对象，可抽象定义为一个类；但每个对象又有各自的特点，蓝色是午时、绿色是12小时制、黄色是分，这些可以通过对象的属性区分。所以，可以给这个对象类定义三个属性：时间类型、当前选择的值和选项数据。
二、时间选择对象类
新建目录viewmodel，存放数据实体对象。右击目录viewmodel >> 新建 >> ArkTS File，文件命名为DayDataItem。

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

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

三、定义时间选择项数据常量
新建一个类文件，是任务页面所用的常量对象。右击目录constants >> 新建 >> ArkTS File，文件命名为DetailConstant。

定义一个时间常量数组DAY_DATA，数组项就是DayDataItem对象，包括上述的三类时间：上下午、小时和分钟。代码如下：

import DayDataItem from '../viewmodel/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
  ];
}

四、时间选择器组件
新建组件文件，右击目录component >> 新建 >> ArkTS File，文件命名为DateSelector。

组件采用层叠布局Stack，在Row行容器内包括TextPicker文本选择器组件，通过遍历常量数组DAY_DATA，每个数组项是一个TextPicker，从左到右分别是上下午、时和分。DateSelector.ets代码如下：

import { DetailConstant } from '../constants/DetailConstant'
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'))
    })
  }
}

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

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

关于层叠布局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