背景
原生UI没有提供日历相关的组件，于是手撸了详细页面的日程。一开始打算使用list加tab的方式来实现切换的效果，但是list的切换是没有办法确定当前展示的索引的，所以没有办法实现日历内容动态添加等效果。在业内大佬的指导下，使用了两个swiper组件分别实现周和日的切换，实现了想要的效果，如下：
代码
DayViewPage
/**
*周天数
*/
import {
DateUtil } from '../Utils/DateUtil';
const WEEKDAY_NUMBER = 7;
@Entry
@Component
struct DayViewPage {
//日期Swiper控件索引
@State ShowDayIndex: number = 0;
//展示日期
@State ShowDay: Date = new Date();
//日期集合
@State DayList: Array<Date> = new Array<Date>();
//日期滑动前索引
@State DayStartIndex: number = 0;
//日期滑动后索引
@State DayEndIndex: number = 0;
//周Swiper控件索引
@State ShowWeekIndex: number = 0;
//周组件亮显索引
@State WeekDayIndex: number = 0
//周所有日期集合
@State CalendarLists: Array<Array<Date>> = new Array<Array<Date>>();
private _TimeNameList: string[] = ["日", "一", "二", "三", "四", "五", "六"]
private weekSwiperController: SwiperController = new SwiperController();
private daySwiperController: SwiperController = new SwiperController();
@Builder
OneDayBuilder(index: number, showDate: Date) {
Column() {
Text(this._TimeNameList[index])
.fontSize(14)
.margin({
bottom: 4 })
.fontColor(this.WeekDayIndex === index ? "#1655ed" : (index == 0 || index == 6) ? "#818382" : Color.Black)
Column() {
Text(showDate.getDate().toString())
.fontColor(this.WeekDayIndex === index ? Color.White : (index == 0 || index == 6) ? "#818382" : Color.Black)
.fontSize(20)
.fontWeight(FontWeight.Bold)
}
.backgroundColor(this.WeekDayIndex === index ? "#1655ed" : Color.White)
.width(35)
.height(35)
.borderRadius(17)
.justifyContent(FlexAlign.Center)
}
.justifyContent(FlexAlign.Center)
.height("100%")
.width('100%')
.backgroundColor(Color.White)
.borderWidth({
bottom: 2 })
.borderColor("#f3f3f3")
.onClick(() => {
this.UpdateShowDayIndex(showDate)
})
}
aboutToAppear(): void {
//初始化今天的一周的前和后
this.ShowDay = new Date();
let thisWeek: Array<Date> = DateUtil.GetWeekDateList(this.ShowDay);
let previousWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(thisWeek[0], -1));
let nextWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(thisWeek[thisWeek.length-1], 1));
this.CalendarLists.push(previousWeek, thisWeek, nextWeek);
this.WeekDayIndex = this.ShowDay.getDay();
this.DayList = previousWeek.concat(thisWeek.concat(nextWeek));
this.ShowWeekIndex = 1;
this.ShowDayIndex = WEEKDAY_NUMBER + this.WeekDayIndex;
}
build() {
Column({
space: 5 }) {
Swiper(this.weekSwiperController) {
ForEach(this.CalendarLists, (item: Array<Date>, index) => {
Grid() {
ForEach(item, (oneDay: Date, dayIndex) => {
GridItem() {
this.OneDayBuilder(dayIndex, oneDay)
}
})
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr')
})
}
.index(this.ShowWeekIndex)
.width("100%")
.height(65)
.loop(false)
.indicator(false)
.onAnimationEnd((index) => {
this.ShowWeekIndex = index;
if (index === 0) {
this.AddPreviousWeekDay();
} else if (index == this.CalendarLists.length - 1) {
this.AddNextWeekDay();
}
let tempShowDay: Date = this.CalendarLists[this.ShowWeekIndex][this.WeekDayIndex];
this.UpdateShowDayIndex(tempShowDay);
})
.margin({
top: 20 })
Swiper(this.daySwiperController) {
ForEach(this.DayList, (oneDay: Date, dayIndex) => {
Column() {
Text(oneDay.toString())
.fontSize(30)
}
.height("100%")
.justifyContent(FlexAlign.Center)
})
}
.loop(false)
.index(this.ShowDayIndex)
.width("100%")
.indicator(false)
.layoutWeight(1)
.onAnimationStart((start, end, event) => {
this.DayStartIndex = start;
})
.onAnimationEnd((end, event) => {
this.DayEndIndex = end;
this.DaySwitch();
})
}
.height('100%')
.width('100%')
}
/**
* 日程切换事件
*/
private DaySwitch() {
if (this.DayStartIndex == this.DayEndIndex) {
return;
}
//往右滑，临界值滑动，需要修改week的展示索引
if (this.DayStartIndex > this.DayEndIndex) {
this.WeekDayIndex--;
if (this.WeekDayIndex == -1) {
this.weekSwiperController.showPrevious();
this.WeekDayIndex = WEEKDAY_NUMBER - 1;
this.ShowDay = this.CalendarLists[this.ShowWeekIndex-1][this.WeekDayIndex];
}
}
//往左滑,临界值滑动，需要修改week的展示索引
else {
this.WeekDayIndex++;
if (this.WeekDayIndex == WEEKDAY_NUMBER) {
this.weekSwiperController.showNext();
this.WeekDayIndex = 0;
this.ShowDay = this.CalendarLists[this.ShowWeekIndex+1][this.WeekDayIndex];
}
}
}
/**
* 添加上一周
*/
private AddPreviousWeekDay() {
let previousWeek: Array<Date> = DateUtil.GetWeekDateList(DateUtil.GetNextDay(this.CalendarLists[0][0], -1));
this.CalendarLists.unshift(previousWeek);
this.weekSwiperController.changeIndex(1);
this.ShowWeekIndex = 1;
this.DayList = previousWeek.concat(this.DayList);
this.UpdateShowDayIndex();
}
/**
* 添加下一周
*/
private AddNextWeekDay() {
let nextWeek: Array<Date> =
DateUtil.GetWeekDateList(DateUtil.GetNextDay(this.CalendarLists[this.CalendarLists.length - 1][WEEKDAY_NUMBER -
1], 1));
this.CalendarLists.push(nextWeek);
this.DayList = this.DayList.concat(nextWeek);
this.UpdateShowDayIndex()
}
/**
* 更新显示日期
* @param nwDate
*/
private UpdateShowDayIndex(nwDate?: Date) {
if (nwDate != undefined) {
this.ShowDay = nwDate;
}
this.WeekDayIndex = this.ShowDay.getDay();
let showDayIndex = this.DayList.findIndex(x =>
x.getFullYear() == this.ShowDay.getFullYear() &&
x.getMonth() == this.ShowDay.getMonth() &&
x.getDate() == this.ShowDay.getDate());
if (showDayIndex == -1) {
return;
}
this.daySwiperController.changeIndex(showDayIndex, false);
}
}
DateUtil
export class DateUtil {
/**
* 通过一天获得一周的date集合
* @param oneDay
* @returns
*/
public static GetWeekDateList(oneDay: Date): Array<Date> {
let dataList: Array<Date> = [];
let dayNumber: number = oneDay.getDay();
for (let index = 0; index < 7; index++) {
let tempDate: Date = new Date(oneDay);
tempDate.setDate(tempDate.getDate() + (index - dayNumber));
dataList.push(tempDate);
}
return dataList;
}
public static GetNextDay(oneDay: Date, index: number): Date {
let tempDay: Date = new Date(oneDay);
tempDay.setDate(tempDay.getDate() + index);
return tempDay;
}
}
