一、实现的效果图
二、虽然Flutter也为我们提供了日期范围选择组件showDateRangePicker
,但是毕竟系统的UI不符合我们的设计风格,所以被迫只能自己实现一个了
- 系统样式
三、日历整体实现逻辑其实也很简单,如下:
- 首先获取每个月份具体有多少天
int _getMonthDays(DateTime time) {
final start = DateTime(time.year, time.month);
DateTime end;
if (time.month == 12) {
end = DateTime(time.year + 1);
} else {
end = DateTime(time.year, time.month + 1);
}
return end.difference(start).inDays;
}
- 在就是获取当月的
1号
是星期几
因为日历从左到右是:
日, 一, 二, 三, 四, 五, 六
,所以我们就可以根据1号是星期几来确定起始位置在哪里
int _getOffset(DateTime month){
return [0, 1, 2, 3, 4, 5, 6, 0][month.weekday];
}
这样基本的日历绘制就没什么问题了,剩下的就是选中的逻辑处理了,完整代码请查看源代码