最近一直在出差，工作繁忙，很久没有时间更新文章了，连华为开发者大会也错过了。今天周末，忙里偷闲给大家分享一个鸿蒙月历组件。
这样的组件大家在工作中应该经常会遇到，而鸿蒙又没有提供一个这样的系统组件，今天我们就来看看怎么实现它。
标题部分比较简单，由两个箭头图片和一个文本组件构成，不再赘述。
下面的‘星期’部分有很多方式去实现，这里我选择使用弹性布局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 = 12
this.yearNow -= 1
}
this.getMonthContent()
}
nextMonth(){
if(this.monthNow < 12){
this.monthNow += 1
}else {
this.monthNow = 1
this.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; // 内容
}
Top comments (0)