基于鸿蒙操作———制作健康App(实现记录列表)

目录

实现效果

项目构建

项目代码

日期代码实现

代码

小结

知识点归纳

寄语

---

实现效果

项目构建

今天完成的部分项目是首页中日期的选择，以及日期弹窗的实现与更改日期；项目中，含有许多零碎的知识点，一些比较陌生的函数调用。

项目代码

日期代码实现

代码

/***
*
*首页分块代码实现日期效果，业务层
*
*/

// 2.统计卡片
      StatsCard()


/***
*
*为业务层提供方法，便于层进行调用
*
*/
import { CommonConstants } from '../../common/constants/CommonConstants'
import DateUtil from '../../common/utils/DateUtil'
import DatePickDialog from './DatePickDialog'
@Component
export default struct StatsCard {

  // 后面的DateUtil指的是来获取这一天的开始日期，默认是当前今天值
  @StorageProp('selectedDate') selectedDate:number = DateUtil.beginTimeOfDay(new Date())


  // 定义弹窗类型
  controller:CustomDialogController = new CustomDialogController({
    builder:DatePickDialog({selectedDate:new Date(this.selectedDate)}) // 进行数据的回显操作
  })
  build(){
    Column(){
      //1.日期信息
      Row(){
        Text(DateUtil.formatDate(this.selectedDate)) // 始终展示的是当前的日期
          .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())
      //2.统计信息

    }
    .width(CommonConstants.THOUSANDTH_940)
    .backgroundColor($r('app.color.stats_title_bgc'))
    .borderRadius(CommonConstants.DEFAULT_18)
  }

}


/***
*
*实现日期弹窗效果，工具类
*
*/

import { CommonConstants } from '../../common/constants/CommonConstants'
@CustomDialog
export default struct DatePickDialog {
  controller:CustomDialogController
  selectedDate:Date = new Date()
  build() {
    Column(){
      // 1.日期选择器
       // 直接进行调用日期选择器函数
      DatePicker({
        start: new Date('2020-1-1'),
        end: new Date(),
        selected: this.selectedDate
      })
        .onChange((value: DatePickerResult) => {
          this.selectedDate.setFullYear(value.year, value.month, value.day)
          console.info('select current date is: ' + JSON.stringify(value))
        })
      // 2.按钮
      Row(){
        Button('取消')
          .width(120)
          .backgroundColor($r('app.color.light_gray'))
          .onClick(()=>this.controller.close())
          .margin({right:5}) // 设置两个实体之间的距离
        Button('确定')
          .width(120)
          .backgroundColor($r('app.color.primary_color'))
          .onClick(()=>{
            // 1.保存日期到全局存储,整个应用的内部存储AppStorage，通过键值形式进行存储，使用毫秒值进行存储，防止以后进行调用时出现问题，方便进行状态监控
            AppStorage.SetOrCreate('selectedDate',this.selectedDate.getTime())
            // 2.关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}

小结

1.最上面一块属于业务层，调用持久层的方法，为控制层提供便利；

2.中间实现的是持久层的方法，其中包含创建方法，以及调用工具类实现相应的内容；

3.属于工具类为持久层提供支持，便于功能的实现，通过三层之间的相互调用以及相互支持，最终进行呈现。

知识点归纳

本结知识点还是比较丰富的：

1.学习了日期选择器DatePicker，具体的用法请看下图，通过定义三种属性实现起止的日期以及系统默认的日期；

2.@StorageProp和@StorageLink指的的区别我会在下章发一下总体知识点；

3.通过AppStorage将日期保存在全局存储中，整个应用的内部进行存储，然后通过毫秒进行数据的存储防止调用出现问题，方便进行调控；

4.在持久层中进行引用时，来获取当前的日期作为系统的默认值，采用引入DateUtil包进行操作，并且设置弹框类型，使得进行回显的操作。

寄语

继续完成项目，并一直坚持下去。加油，不放弃，通过不断地学习强化自身，一起进步，感谢支持的伙伴！