健康应用4

日期选择弹窗组件。以下是其核心内容的整理：

1. 导入模块：

   • CommonConstants：包含通用常量的模块。

2. 组件定义：

   • DatePickDialog：使用@CustomDialog标记的结构体，表示一个自定义的日期选择弹窗。

3. 组件属性：

   • controller：CustomDialogController实例，用于控制弹窗的行为。
   • selectedDate：用于存储选中的日期，默认为当前日期。

4. UI构建：

   • 使用Column布局构建弹窗的UI，并设置组件间的间距。

5. 日期选择器：

   • DatePicker组件用于选择日期，设置起始日期为2020年1月1日，结束日期为当前日期。
   • 当日期改变时，更新selectedDate属性。

6. 按钮操作：

   • 包含两个按钮："取消"和"确定"。
   • "取消"按钮点击时调用controller.close()关闭弹窗。
   • "确定"按钮点击时执行以下操作：
     • 将选中的日期保存到全局存储AppStorage，键为'selectedDate'，值为日期的毫秒时间戳。
     • 关闭弹窗。

7. 样式和布局：

   • 弹窗的内边距使用CommonConstants.SPACE_12。

这个组件的主要功能是提供一个日期选择的界面，允许用户选择一个日期，并通过"取消"或"确定"按钮进行相应的操作。选中的日期可以被保存到全局存储中，以便在应用的其他部分使用。

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({//ArkTS API组件
        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.保存日期到全局存储。把日期转成number类型的毫秒值，可以做状态监控。可以用@Prp等监控selectedData变量
            AppStorage.SetOrCreate('selectedDate', this.selectedDate.getTime())
            // 2.关闭窗口
            this.controller.close()
          })
      }
    }
    .padding(CommonConstants.SPACE_12)
  }
}