网站排行榜福州网络推广

最近一直在出差，工作繁忙，很久没有时间更新文章了，连华为开发者大会也错过了。今天周末，忙里偷闲给大家分享一个鸿蒙月历组件。

这样的组件大家在工作中应该经常会遇到，而鸿蒙又没有提供一个这样的系统组件，今天我们就来看看怎么实现它。
标题部分比较简单，由两个箭头图片和一个文本组件构成，不再赘述。

下面的‘星期’部分有很多方式去实现，这里我选择使用弹性布局Flex：

@State WEEKS:string[] = ['周日','周一','周二','周三','周四','周五','周六']Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap}){ForEach(this.WEEKS,(str:string,index)=>{Text(str).fontSize(14).fontColor(Color.Gray).textAlign(TextAlign.Center).width('50%').height(35)})}

最难的部分在于日历部分，难点在于我们首先要知道当前月份一共有多少天，还要知道从星期几开始排列，也就是这个月的1号是星期几。
在鸿蒙中只需要一行代码就可以获取当前月份的总天数：
 

const totalDays = new Date(year, month, 0).getDate();

再获取1号是星期几：
 

currentFirstWeekDay = new Date(year, month - 1, 1).getDay();

接下来，为了方便展示数据，我们除了要把总天数存入数组以外，还要在1号前补0。比如某个月的第一天是星期三，我们就要在前面补两个0，或者你如果把周日放在第一天就要补3个0。

for (let item = 0; item < currentFirstWeekDay; item++) {currentAllDay.push(0)
}
for (let item = 1; item <= totalDays; item++) {currentAllDay.push(item);
}

在创建数组的过程，你还可以插入一些其他需要展示的信息。
有了上面的数组之后就可以很容易的展示它们，你可以选择Grid网格组件，也可以使用Flex弹性布局组件：
 

Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){ForEach(this.MONTHDAY,(calendar:Calendar,index)=>{Column({space:2}){Text(calendar.day.toString()).fontSize(16).fontColor(Color.Black).textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)Text(calendar.content).fontColor(Color.Gray).fontSize(10)}.justifyContent(FlexAlign.Center).padding({top:4}).width('14.2%').height(60).alignItems(HorizontalAlign.Center).visibility(calendar.day == 0? Visibility.Hidden:Visibility.Visible).backgroundColor(Color.White)})}

下面为大家贴出完整代码：

@Entry
@Component
struct Index {@State WEEKS:string[] = ['周日','周一','周二','周三','周四','周五','周六']@State MONTHDAY:Calendar[] = []@State dateToday:Date = new Date()@State monthNow:number = this.dateToday.getMonth() + 1@State yearNow:number = this.dateToday.getFullYear()aboutToAppear(){this.getMonthContent()}getMonthContent(){const monthDays: number[] = this.getMonthDate(this.monthNow, this.yearNow);this.MONTHDAY = []for (let index = 0; index < monthDays.length; index++) {const num = monthDays[index];let calendarItem:Calendar = {year:this.yearNow,month:this.monthNow,day:num,content:'内容 ' + (Math.floor(Math.random() * 10)).toString()}this.MONTHDAY.push(calendarItem)}}getMonthDate(month: number, year: number): number[] {const SATURDAY: number = 6;let currentFirstWeekDay: number = 0;let currentLastWeekDay: number = 0;const currentAllDay: number[] = [];const totalDays = new Date(year, month, 0).getDate();//最后-1表示星期从周一开始，周日开始则不需要currentFirstWeekDay = new Date(year, month - 1, 1).getDay();currentLastWeekDay = new Date(year, month - 1, totalDays).getDay();for (let item = 0; item < currentFirstWeekDay; item++) {currentAllDay[item] = 0;}for (let item = 1; item <= totalDays; item++) {currentAllDay.push(item);}for (let item = 0; item < SATURDAY - currentLastWeekDay; item++) {currentAllDay.push(0);}return currentAllDay;}addZreo(num:number){return num > 9?num.toString() : '0' + num.toString()}lastMonth(){if(this.monthNow > 0){this.monthNow -= 1}else {this.monthNow = 12this.yearNow -= 1}this.getMonthContent()}nextMonth(){if(this.monthNow < 12){this.monthNow += 1}else {this.monthNow = 1this.yearNow += 1}this.getMonthContent()}build() {Column(){Row({space:20}){Image($r('app.media.last')).width(25).height(25).onClick(()=>{this.lastMonth()})Text(this.yearNow.toString() + '-' + this.addZreo(this.monthNow)).fontSize(15).fontColor(Color.Black).fontWeight(FontWeight.Bold)Image($r('app.media.next')).width(25).height(25).onClick(()=>{this.nextMonth()})}.width('100%').height(40).justifyContent(FlexAlign.Center)Column(){Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap}){ForEach(this.WEEKS,(str:string,index)=>{Text(str).fontSize(14).fontColor(Color.Gray).textAlign(TextAlign.Center).width('50%').height(35)})}Flex({direction:FlexDirection.Row,wrap:FlexWrap.Wrap}){ForEach(this.MONTHDAY,(calendar:Calendar,index)=>{Column({space:2}){Text(calendar.day.toString()).fontSize(16).fontColor(Color.Black).textAlign(TextAlign.Center).fontWeight(FontWeight.Bold)Text(calendar.content).fontColor(Color.Gray).fontSize(10)}.justifyContent(FlexAlign.Center).padding({top:4}).width('14.2%').height(60).alignItems(HorizontalAlign.Center).visibility(calendar.day == 0? Visibility.Hidden:Visibility.Visible).backgroundColor(Color.White)})}}}.backgroundColor(Color.White).width('100%').padding({left:10,right:10})}
}
export interface Calendar {month: number; // 月day: number; // 日year:number; // 年content: string; // 内容
}