实战篇：带着大家用鸿蒙HarmonyOS做项目（二：自定义日历组件）

Shaka
3,745 阅读6分钟

前言

上一节我们开发完了Home、Register、Login以及大部分的量的Mine的内容

这一节我们接着上一节来进行开发

上一节的地址给大家放在这里 实战篇：带着大家用鸿蒙HarmonyOS做项目（一） - 掘金 (juejin.cn)

好的，咱们开始吧！

Mine

继续Mine模块的开发

我们现在搞一个登出，可以跳到Login页面

image.png

然后就可以跳到登录页了

Calendar模块

我们现在开始搞日历的模块

这里很尴尬，我并没有找到日历的组件，即使是我看了查询了文档也只看到了在低代码和js中提到了一下

image.png

image.png

所以这里我打算自己封装一个日历组件，当然，如果你有什么别的方法，记得评论留言让我学习一下~

自定义日历组件

image.png

这里我在views下新建了一个components文件夹，用来存放一些功能组件，因为之前的views不能满足我的需求了，自定义组件越来越多，会变得不清晰，在之后我会把之前的一些功能组件，例如TextPro等都放到components下

好的，我现在新建了一个CalendarItem.ets，作为我的日历

正常的日历应该有三部分，但是我的项目中设计的是想显示当日的日期，所以在头部的地方简化了

好滴，我们分一下，Header头部、Week周、Day日

这里我们采用@Builder完成这三部分即可

首先是Header头部，这部分比较简单，我们目前只需要一个文本即可

这里我简单写一下，然后效果是这样的

image.png

大家后期可以自行改善

然后文本文本是写死的，后面是需要进行更改的，但是这里不急，而且也简单

然后我们开始做Week的部分

因为日-六这部分是固定的，我们直接写数据即可

image.png

然后写一下具体的Week组件，我们采用Grid布局，并且直接用ForEach循环，相信经过前面的学习，大家到这里直接就能写出来了

image.png

然后我们引用一下组件

image.png

OK，效果出来了

image.png

好的，简单的部分我们已经完成了，现在到了较为复杂的Day部分，这部分我认为分下面几难点进行处理

  • 样式（简单）
  • 当前月的天数（简单）
  • 当前月的具体日期对应（稍复杂）

最后一下可能我陈述的不好，我这里拿电脑的日历举个例子

image.png

我们可以看到，这个月的一号是从周五开始的，是周日结束的，那么我们就需要区分出前月，当月，下月

首先，我定义一下当前的年月日

image.png

然后在aboutToAppear这个生命周期中通过Date()来赋值

image.png

此时我们可以改进一下Header了

image.png

这时我们的Header的日期就是实际获取到的了，而不是写死的

好的，我们继续Day模块的开发

我定义一个allDay，代表当月的天数

image.png

然后我们获取一下当月的天数

image.png

然后遍历一下

image.png

这个时候我们先写一下Day组件

image.png

然后我们调用一下Day组件看一下效果

image.png

ok，没问题

现在我们基础样式和当月天数完成了，我们继续往下

我现在想知道上个月的天数

现在我们的思路是的思路是首先获取当月第一天是星期几，然后直接用上个月的天数填满当前行，同理结尾也是这个方式

那么我们先获取当月第一天是星期几

image.png

我给这个值取名为currentFirstWeekDay

然后我们通过Date的api来获取到我们想要的值

image.png

好的，我们现在来获取上个月的天数，首先，我们获取到上个月最后一天

image.png

然后我们需要知道，上个月应该显示几天

image.png

最后我们定义一个数组week用来显示上个月需要显示的那几天

image.png

然后我们定义数组preMonth来存放上个月的日期

image.png

然后赋值

image.png

然后我们可以在Day中去加上上个月的日期了

image.png

这里加了个背景色，方便区分

image.png

然后我的项目中不需要显示，于是我将其隐藏

这是最后的效果

image.png

最后，我想给当前日加点样式，方便观看

image.png

image.png

Calendar模块的开发

在完成了CalendarItem日历组件后，我们开始回归到Calendar模块的开发

views下新建Calendar

image.png

在Calendar中引入CalendarItem

image.png

更改TabBar

image.png

效果

image.png

然后我们现在加上一个标题

image.png

下面我们是和Home页一样的列表

这里我直接拿过来

image.png

效果出来了

然后现在不同的是右侧的内容，我现在不想要过期这个按钮，我想要变成例如：剩余两天这样的效果，那我们就改一下

image.png

这里我偷懒一下，大家懂就行

然后我稍微改一下内容

image.png

效果

image.png

结尾

很感谢大家的支持，我会抓紧去写下个模块的

这里需要说的是，我并没有完整地开发出一整个日历组件，因为其实日历组件还有很多别的功能，但是在这个项目当中用不到，而我现在想快速把项目写完，所以我就没有完整写出来

但是大家放心，我后面会完整地给大家把日历组件写完，甚至还有一些别的组件

因为鸿蒙提供的组件实在有限，很多需要自己封装，而我之前有过组件库的开发经历，所以我在想用不用把一些组件封装出来，作为一个单独的项目

目前就打算在这个项目完成后做，大家可以期待一下，如果你有想法，可以和我一起做

我会加急把这个系列更完，同时此项目优化的地方有很多，可能我最后完成后会统一优化一下

最近也真的很忙，如果更慢了的话希望大家理解~

avatar
文章
阅读
粉丝