开发鸿蒙项目黑马健康APP系列项目

一、工作主要介绍

今天进行的工作主要是对统计卡片中日期信息的一个班级和制作工作。

二、运行效果及主要设计思路的介绍

首先来向大家展示一下我所做的页面的最终效果图吧！

三、设计过程中遇到的一些问题

如何解决用户可以自选时间日期的问题：

对于这个问题，我使用了一个新学习的组件那就是DatePicker。这是一个日期选择器，在使用时我们可以传递三个参数：日期选择器的起始时间、结束时间以及用户选定的时间。但在我们的情况下，只需要传递起始时间和结束时间就足够了。至于用户选定的时间，我们不需要指定，可以默认使用当前时间。这样就能让用户自己选择他们需要的特定时间。在这里，我不得不提到我刚刚学会的一个新组件，那就是DatePicker。这是一个日期选择器，在使用时我们可以传递三个参数：日期选择器的起始时间、结束时间以及用户选定的时间。但在我们的情况下，只需要传递起始时间和结束时间就足够了。至于用户选定的时间，我们不需要指定，可以默认使用当前时间。这样就能让用户自己选择他们需要的特定时间。

四、实验代码：

日期选择器

//自定义弹窗（日期选择）（统计卡片）
import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller:CustomDialogController
  selectedDate:Date=new Date()//选中的日期（默认今天）

  build() {
    Column({space:CommonConstants.SPACE_12}){
      //1.日期选择器
      DatePicker({
        start: new Date('2020-01-01'),//开始时间
        end: new Date(),//结束时间
        selected: this.selectedDate//选中时间
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)//传值改变选中的时间
        })
      //2.按钮
      Row({space:CommonConstants.SPACE_12}){
        Button('取消')
          .width(120)
          .backgroundColor($r('app.color.light_gray'))
          .onClick(()=>this.controller.close())//关闭弹窗
        Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))
          .onClick(()=>{
            //1.保存日期到全局
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())//键值对（不存日期对象，状态变量监控时会出错，存毫秒值）
            //2.关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

当前日期的下拉按键:

 builder:DatePickDialog({selectedDate:new Date(this.selectDate)})
  })
  build() {
    Column(){
      //1.日期信息
      Row(){
        Text(DateUtil.formatDate(this.selectDate))
          .fontColor($r('app.color.secondary_color'))
        Image($r('app.media.ic_public_spinner'))
          .width(20)
          .fillColor($r('app.color.secondary_color'))
      }
      .padding(CommonConstants.SPACE_8)
      .onClick(() => this.controller.open())

五、小结

通过这次实验，我不仅了解到了如何使用鸿蒙操作系统开发软件来编辑用户所选定的日期，还掌握了日期选择器的基本用法。我深刻体会到了鸿蒙开发环境为我们的日常生活带来的便捷。