日期选择弹窗组件。以下是其核心内容的整理:
-
导入模块:
CommonConstants
:包含通用常量的模块。
-
组件定义:
DatePickDialog
:使用@CustomDialog
标记的结构体,表示一个自定义的日期选择弹窗。
-
组件属性:
controller
:CustomDialogController
实例,用于控制弹窗的行为。selectedDate
:用于存储选中的日期,默认为当前日期。
-
UI构建:
- 使用
Column
布局构建弹窗的UI,并设置组件间的间距。
- 使用
-
日期选择器:
DatePicker
组件用于选择日期,设置起始日期为2020年1月1日,结束日期为当前日期。- 当日期改变时,更新
selectedDate
属性。
-
按钮操作:
- 包含两个按钮:"取消"和"确定"。
- "取消"按钮点击时调用
controller.close()
关闭弹窗。 - "确定"按钮点击时执行以下操作:
- 将选中的日期保存到全局存储
AppStorage
,键为'selectedDate'
,值为日期的毫秒时间戳。 - 关闭弹窗。
- 将选中的日期保存到全局存储
-
样式和布局:
- 弹窗的内边距使用
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) } }