OpenHarmony - 使用ArkUI框架制作的日历应用

想了解更多关于开源的内容，请访问：

51CTO 鸿蒙开发者社区

https://ost.51cto.com

前言

对于初次接触OpenHarmony应用开发的开发者，建议通过开发一个简单的日历应用来快速入门。通过开发日历应用，可以熟悉基本图形绘制、ArkUI组件的使用以及UI组件生命周期，从而更深入地理解OpenHarmony应用开发的过程。

效果展示

开发环境

• 开发工具：DevEco Studio 3.1 Release
• 开发环境：OpenHarmony API 9
• 开发语言：eTS

关于eTS

eTS语言：基于TypeScript（简称TS）拓展的出来的，是OpenHarmony应用开发语言，使用ArkUI框架提供的组件进行界面开发。

TypeScript是由微软开发的一种开源编程语言，它建立在JavaScript的基础上，但引入了静态类型、类和接口等概念，使其具有面向对象和强类型化的特性。

TypeScript 和 JavaScript 的区别：

• TypeScript 是 JavaScript 的超集，在JavaScript的基础上拓展了语法，包含了 JavaScript 的所有元素
• 在TypeScript 中的数据要求有明确的类型，而JavaScript中没有
• TypeScript在编译时可以发现错误，JavaScript只有在运行时报错

布局容器组件

• Column ：沿垂直方向布局的容器，可以包含多个子组件
• Row：沿水平方向布局容器，可以包含多个子组件
• Stack：堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件，可以包含多个子组件
• Flex：弹性布局，元素在容器内水平居中，垂直等间隔分散，可以包含多个子组件
• Scroll：可滑动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滑动，内部只支持单个子组件，可支持垂直或者水平滑动
• Tabs：一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图，只能包含子组件TabContent
• List：列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本，只能包含ListItem子组件
• Swiper：滑动容器，提供左右切换子组件显示的能力，可以包含多个子组件
• Grid：网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局，只能包含GridItem子组件

绘制组件

• Circle：圆形绘制组件
• Ellipse：椭圆绘制组件
• Line：直线绘制组件
• Polyline：折线绘制组件
• Polygon：多边形绘制组件
• Path：路径绘制组件
• Rect：矩形绘制组件
• Shape：绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。

自定义组件

一. 自定义组件生命周期函数

• aboutToAppear：在组件的 build 函数之前执行，可以做数据的初始化操作。
• aboutToDisappear：在组件销毁之前执行，不允许改变状态变量，会导致应用程序行为不稳定，可以做资源的释放操作。
• onPageShow：仅@Entry修饰的自定义组件生效，应用进入前台台，页面显示时触发。
• onPageHide：仅@Entry修饰的自定义组件生效，应用进入后台，页面消失时触发。

二. 自定义组件常用属性

• @State ：变量需要本地初始化，初始化的值可以被构造参数覆盖；
• @Prop：必须通过构造函数参数初始化，属于单向数据绑定，使用其父组件提供的@State变量进行初始化
• @Link：必须通过构造函数参数进行初始化，属于双向数据绑定，子组件对@Link变量的更改将同步修改父组件的@State变量；

实现过程

日历一页显示42天，包括上个月、当前月、下个月的天数，上个月和下个月的日期显示灰色，点击日期显示选中效果。支持选择年份、月份，指定一个日期，获取当前月的天数，根据该月1号在一周中的第几天，获取上个月显示的天数，以及下个月显示的天数。

获取上一个月的天数，根据指定月份的1号在一周的第几天，上月最大天数，计算出上个月天数，以object的形式添加到数组，以便区分，代码如下：

const prevMonthDays = [];
//获取上个月最大天数
let prevLastDay = new Date(year, month-1, 0).getDate();
//获取某月1号所在一周的第几天
let startWeek = new Date(year, month, 1).getDay();
// 上个月的最大天数减去当前月1号所在一周的第几天
for (let i = prevLastDay - startWeek + 1; i{
ListItem() {
Row() {
Text(item).fontSize(20).margin({ left: 10 })
}
}
.onClick(() => {
this.data.pushData('item value: ' + this.data.totalCount())
})
}, item => item)
}

总结

日历应用实现在一页42个格子上显示上个月、当前月、下个月的日期，通过日历应用的开发了解到了ArkUI组件的一些用法，生命周期和数据的加载过程，对之后的应用开发有很大的帮助。

想了解更多关于开源的内容，请访问：

51CTO 鸿蒙开发者社区

https://ost.51cto.com