【Harmony OS Next】封装时间选择按钮

背景

由于原生的时间选择器（DatePicker）不能满足UI的设计要求，比如：会自带分割线；无法调节各选择项高度等限制，虽然也无法理解TextPicker已有的属性，DatePicker上竟然没有。因此，想着使用三个TextPicker组合成一个时间选择器，后期还可以做更多的设置，可以只选择月份和日期等。

实现效果

实现思路

• 封装时间滑动组件，实现月份变化时，结合年份动态改变日期集合
• 封装按钮控件，添加上点击下翻的动画和整体控件高度的变化

MyTimePicker

提供了开始时间、结束时间、选择日期属性可以给父级构件进行调用。为了统一三个TextPicker样式，封装了MyPicker公用样式，后续需要统一修改他们的样式可以直接在这里面添加。

@ComponentV2
export struct MyTimePicker {
  @Param Start: Date = new Date('1970-1-1')
  @Param End: Date = new Date('2100-12-31')
  @Param SelectDate: Date = new Date()
  @Local Years: number[] = []
  @Local Months: number[] = []
  @Local Days: number[] = []
  @Local YearSelectIndex: number = 0
  @Local MonthSelectIndex: number = 0
  @Local DaySelectIndex: number = 0

  aboutToAppear(): void {
    this.Years =
      Array.from<number, number>({ length: this.End.getFullYear() - this.Start.getFullYear() + 1 },
        (_, k) => this.Start.getFullYear() + k)
    this.Months = Array.from<number, number>({ length: 12 }, (_, k) => k + 1)
    this.UpdateDaysInMonth(this.SelectDate.getFullYear(), this.SelectDate.getMonth() + 1);
    this.SelectIndexInit();
  }

  build() {
    Row() {
      // 年份选择
      TextPicker({ range: this.Years.map(x => `${x}年`), selected: this.YearSelectIndex })
        .onChange((value, index) => {
          const newYear = this.Years[index as number]
          this.SelectDate.setFullYear(newYear)
          this.UpdateDaysInMonth(newYear, this.SelectDate.getMonth() + 1)
        })
        .MyPicker()

      // 月份选择
      TextPicker({ range: this.Months.map(v => `${v}月`), selected: this.MonthSelectIndex })
        .onChange((value, index) => {
          if (index as number || index == 0) {
            const newMonth = index as number + 1
            this.SelectDate.setMonth(newMonth - 1)
            this.UpdateDaysInMonth(this.SelectDate.getFullYear(), newMonth)
          }
        })
        .MyPicker()

      // 日期选择
      TextPicker({ range: this.Days.map(x => `${x}日`), selected: this.DaySelectIndex })
        .onChange((value, index) => {
          console.info(index.toString())
          this.SelectDate.setDate(index as number + 1)
        })
        .MyPicker()
    }
    .height('100%')
    .width('100%')
  }

  /**
   * 选择索引初始化
   */
  private SelectIndexInit() {
    let yearIndex: number = this.Years.findIndex((value: number) => {
      return this.SelectDate.getFullYear() == value
    });
    let monthIndex: number = this.Months.findIndex((value: number) => {
      return this.SelectDate.getMonth() + 1 == value
    });
    let dayIndex: number = this.Days.findIndex((value: number) => {
      return this.SelectDate.getDate() == value
    });
    this.YearSelectIndex = yearIndex;
    this.MonthSelectIndex = monthIndex;
    this.DaySelectIndex = dayIndex;
  }

  private UpdateDaysInMonth(year: number, month: number) {
    const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (month === 2 && this.IsLeapYear(year)) {
      this.Days = Array.from<number, number>({ length: 29 }, (_, i) => i + 1); // 闰年2月有29天
    } else {
      this.Days = Array.from<number, number>({ length: daysInMonth[month - 1] }, (_, i) => i + 1);
    }
    let dayIndex: number = this.Days.findIndex((value: number) => {
      return this.SelectDate.getDate() == value
    });
    this.DaySelectIndex = dayIndex;
  }

  /**
   * 判断是否是闰年
   * @param year
   * @returns
   */
  private IsLeapYear(year: number): boolean {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
  }
}

@Extend(TextPicker)
function MyPicker() {
  .divider(null)
  .layoutWeight(1)
  .selectedTextStyle({
    color: Color.Black,
    font: {
      weight: FontWeight.Bold
    }
  })
}

DatePickButton

为了实现组件的复用，把标题也封装进来。这里需要注意的点是，这里使用了dayjs第三方库，需要提前引用第三方库哈。

import dayjs from "dayjs"
import { MyTimePicker } from "./MyTimePicker"

@ComponentV2
export struct DatePickButton {
  @Param Title: string = "开始时间:"
  @Param SelectDate: Date = new Date()
  @Local IsPickerShow: boolean = false

  build() {
    RelativeContainer() {
      Text(this.Title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .id("Title")
      Button() {
        Row() {
          Text(dayjs(this.SelectDate).format("YYYY 年 MM 月 DD 日 "))
            .fontSize(18)
          Path()
            .width(30)
            .height(30)
            .commands(`M${vp2px(7.5)} ${vp2px(10)} L${vp2px(15)} ${vp2px(20)} L${vp2px(22.5)} ${vp2px(10)} Z`)
            .rotate(this.IsPickerShow ? {
              centerX: "50%",
              centerY: "50%",
              angle: 180
            } : {
              angle: 0
            })
        }
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.SpaceBetween)
      }
      .border({
        color: Color.Black,
        width: 2,
        radius: 15
      })
      .backgroundColor(Color.White)
      .type(ButtonType.Normal)
      .height(40)
      .margin({ left: 5 })
      .padding({ left: 15, right: 15 })
      .alignRules({
        left: { anchor: "Title", align: HorizontalAlign.End },
        center: { anchor: "Title", align: VerticalAlign.Center }
      })
      .onClick(() => {
        animateTo({ duration: 100 }, () => {
          this.IsPickerShow = !this.IsPickerShow;
        })
      })
      .id("PickerBtn")

      MyTimePicker({
        SelectDate: this.SelectDate
      })
        .height(this.IsPickerShow ? 150 : 0)
        .margin({ top: 10 })
        .alignRules({
          top: { anchor: "PickerBtn", align: VerticalAlign.Bottom },
          left: { anchor: "Title", align: HorizontalAlign.Start },
          right: { anchor: "PickerBtn", align: HorizontalAlign.End }
        })
        .id("DatePicker")

      Rect()
        .width("100%")
        .height(this.IsPickerShow ? 35 : 0)
        .radiusWidth(20)
        .fill("#56FFEB")
        .fillOpacity(0.5)
        .stroke(Color.Black)
        .strokeWidth(2)
        .alignRules({
          middle: { anchor: "DatePicker", align: HorizontalAlign.Center },
          center: { anchor: "DatePicker", align: VerticalAlign.Center },
        })
    }
    .height(this.IsPickerShow ? 200 : 50)
    .width("100%")
    .padding({ left: 15, right: 15 })
  }
}

Index

在主页面中使用时间选择组件

import { DatePickButton } from './DatePickButton'


@Entry
@ComponentV2
struct Index {
  @Local StartDate: Date = new Date()
  @Local EndDate: Date = new Date()

  build() {
    Column({ space: 5 }) {
      DatePickButton({
        Title: "开始时间：",
        SelectDate: this.StartDate
      })
      DatePickButton({
        Title: "结束时间：",
        SelectDate: this.EndDate
      })
    }
    .padding({ top: 20 })
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
  }
}

总结

主要实现了UI需要的没有分割线的时间选择器，而且可以有更多自定义空间，但是也会受限于TextPicker的能力范围，但是现阶段基本能满足使用需求了。希望这篇文章可以帮到你~~