HarmonyOS基本UI封装——日历选择器(七)

highlight: a11y-light
theme: cyanosis

前言

• BasicLibrary是一个基于API 12封装的基本库
• 未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前正在完善UI组件，大家如果组件有什么需求，可以尽管提哦
• BasicLibrary项目地址
• BasicLibrary的openHarmony三方库中心仓

文章系列

• HarmonyOS基本工具封装——BasicLibrary的基本使用(一)
• HarmonyOS基本UI封装——标题栏组件NavBar封装与使用(二)
• HarmonyOS基本UI封装——Cell单元格组件封装与使用(三)
• HarmonyOS基本UI封装——Dialog 弹出框、loading加载和List下拉刷新加载更多（四）
• HarmonyOS基本UI封装——ImageLoader 图片上传(五)
• HarmonyOS基本UI封装——顶部Toast、骨架屏(六)

简介

鸿蒙基本库封装，提升鸿蒙开发效率

安装

ohpm install @peakmain/library

一、Toast提示优化

• 之前Toast提示必须每个页面都需要设置CustomDialogController，使用太繁琐，这次就对此进行了优化

• 优化前后使用对比
  [图片上传失败...(image-33acd5-1730072903427)]

• 效果

[图片上传失败...(image-364d37-1730072903427)]

导入依赖

import { ToastManager } from "@peakmain/library"

构造参数

方法

示例代码

//默认情况
new ToastManager(this.getUIContext())
  .showNormalMessage("正常提示")
//成功情况
new ToastManager(this.getUIContext())
  .showSuccessMessage("成功提示")
//错误提示
new ToastManager(this.getUIContext())
  .showErrorMessage("错误提示")

二、日历选择器

初始设置

使用

• EntryAbility的onWindowStageCreate方法设置默认已选中的开始日期和结束日期, 默认是当天为开始日期，和明天为结束日期

CalendarDataManager.context = this.context
CalendarDataManager.getSelectCalendarData()

• 页面获取日历的开始日期和结束日期

import {
    CalendarModel, SELECTED_END_DATE,
    SELECTED_START_DATE
} from '@peakmain/library';
@StorageProp(SELECTED_START_DATE) selectStartModel: CalendarModel = new CalendarModel(0, 0, 0, 0); // 初始化dateModel数据
@StorageProp(SELECTED_END_DATE) selectEndModel: CalendarModel = new CalendarModel(0, 0, 0, 0); // 初始化dateModel数据

CalendarModel参数

1.1 页面日历选择器

[图片上传失败...(image-e826e1-1730072903427)]

导入依赖

import "@peakmain/library/src/main/ets/pages/calendar/SelectCalendarPage";

启动页面

router.pushNamedRoute({
  name: "SelectCalendarPage",
  params: {
    "title": "入离店日期",
    /* "selectedBackgroundColor": "#A78461",
     "selectedBetweenBackgroundColor": "#1aa78461",*/
  }
})

参数

返回后获取结果

  onPageShow(): void {
    let params = router.getParams()
    if (params) {
      let map = params as Map<string, CalendarModel>
      let startDate: CalendarModel = map["startDateCalendarModel"]
      let endDate: CalendarModel = map["endDateCalendarModel"]
      //页面显示的结果
      this.result =
        `${startDate.year}年${startDate.month}日${startDate.day}日——${endDate.year}年${endDate.month}日${endDate.day}日`
    }
  }

1.2 弹窗日期选择器

[图片上传失败...(image-8d90ea-1730072903427)]

导入依赖

import { CalendarManager, CalendarModel, SELECTED_END_DATE, SELECTED_START_DATE } from '@peakmain/library';

打开/关闭弹窗/选择结果

let dialog = new CalendarManager(
  this.getUIContext(),
  (startDate, endDate) => {
    dialog.close()
    //页面显示结果
    this.result =
      `${startDate.year}年${startDate.month}日${startDate.day}日——${endDate.year}年${endDate.month}日${endDate.day}日`
  },$r("app.color.color_A78461"),$r("app.color.color_1AA78461")).open()

构造函数

constructor(uiContext: UIContext, onSelectCalendarResult: (startDateCalendarModel: CalendarModel,
  endDateCalendarModel: CalendarModel) => void,
  selectedBackgroundColor: ResourceStr = $r("app.color.color_A78461"),
  selectedBetweenBackgroundColor: ResourceStr = $r("app.color.color_1AA78461")) 

open：打开弹窗

• 默认返回为CalendarManager实例
• 无参数

close:关闭弹窗

• 无参数

1.3 自定义日期选择器

• 除了上述两个已经默认实现的组件：SelectCalendarDialog和SelectCalendarPage
• 大家还可通过使用CalendarComponent组件来实现自定义弹窗

参数