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

前言

• 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，使用太繁琐，这次就对此进行了优化

• 优化前后使用对比

• 效果

导入依赖

import { ToastManager } from "@peakmain/library"

构造参数

参数名	参数类型	名称
uiContext	UIContext	上下文
duration	number	动画加载时长

方法

方法名	参数	参数说明	背景颜色	说明
showNormalMessage	string	提示的文案	#272a2b	默认情况
showSuccessMessage	string	提示的文案	#579572	成功
showErrorMessage	string	提示的文案	#9F4B48	错误

示例代码

//默认情况
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参数

参数名	类型	说明
year	number	年
month	number	月
week	number	周几
day	number	日

1.1 页面日历选择器

导入依赖

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

启动页面

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

参数

参数名	类型	必填	说明
title	string	否	标题，默认文案是选择日期
selectedBackgroundColor	ResourceString	否	选中开始或者结束日期时的背景颜色，默认值是#A78461
selectedBetweenBackgroundColor	ResourceString	否	选中开始和结束日期之间日期的背景颜色，默认值是#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 弹窗日期选择器

导入依赖

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")) 

参数名	类型	必填	说明
uiContext	UIContext	是	上下文
onSelectCalendarResult	(startDateCalendarModel: CalendarModel,endDateCalendarModel: CalendarModel) => void	否	选择日历后的结果回调 startDateCalendarModel:选中的开始日期 endDateCalendarModel:选中的结束日期
selectedBackgroundColor	ResourceString	否	选中开始或者结束日期时的背景颜色 默认值是#A78461
selectedBetweenBackgroundColor	ResourceString	否	选中开始和结束日期之间日期的背景颜色 默认值是#1AA78461

open：打开弹窗

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

close:关闭弹窗

• 无参数

1.3 自定义日期选择器

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

参数

参数名	类型	必填	说明
currentMonth	number	是	当前月份
currentDay	number	是	当前日
currentYear	number	是	当前年份
noUsedMessage	string	否	当前不可选的提示文案 默认是您选择的日期不在可选范围内
selectedBackgroundColor	ResourceString	否	选中开始或者结束日期时的背景颜色 默认值是#A78461
selectedBetweenBackgroundColor	ResourceString	否	选中开始和结束日期之间日期的背景颜色 默认值是#1AA78461
onSelectCalendarResult	(startDateCalendarModel: CalendarModel, endDateCalendarModel: CalendarModel) => void	否	选中日期的回调