Flutter仿钉钉考勤日历的示例代码
本文主要介绍了Flutter仿钉钉考勤日历的示例代码,分享给大家,具体如下:
效果
原型
开发
1. 使用
// 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDate: DateTime(2030), onDateChanged: onDateChanged, // 0:无状态,1:正常考勤 2:异常考情,迟到,早退, // 若不满一个月,日历会自动用0补满一个月 checking: [ 0, 0, 1, 2, ], ),
DatePickerDialog是在存在与Flutter的material包中,Flutter自带的日历是以dialog形式存在的,本文将dialog改成StatefulWidget直接在页面中,将多余东西去掉,直接在material/calendar_date_picker.dart中_DayPicker上进行修改。
2. 修改日历中日期样式:
Widget dayWidget = Container( margin: EdgeInsets.all(4.0), decoration: decoration, alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(localizations.formatDecimal(day), style: TextStyle( fontSize: 14.0, color: dayColor, fontWeight: FontWeight.bold)), Visibility( visible: checking[day - 1] == 1 || checking[day - 1] == 2, child: Container( height: 6.0, width: 6.0, decoration: BoxDecoration( shape: BoxShape.circle, color: isSelectedDay ? Colors.white : (checking[day - 1] == 1 ? Color(0xFF1376EE): Color(0xFFFF8A21)), ), ), ), ], ), );
Visibility原来没有,是修改加上去的,主要是显示当天打卡状态,若打卡正常则在日期显示下方显示蓝色小点,若有异常则显示橙色的点,若没有状态就不显示,checking则是使用DatePickerDialog传入的,由于日历从1开始,数组是从索引0开始的,所以使用checking[day - 1]才能准确获取某一日的打卡状态,day 则是日历中某一月中所有日期。
3.设置星期标题
修改后:
List<Widget> _dayHeaders() { final List<Widget> result = <Widget>[]; final List<String> weekdays = ["日", "一", "二", "三", "四", "五", "六"]; for (int i = 1; true; i = (i + 1) % 7) { final String weekday = weekdays[i]; result.add(ExcludeSemantics( child: Center( child: Text(weekday, style: TextStyle(fontSize: 14.0, color: Color(0xFF999999)))), )); if (i == (1 - 1) % 7) break; } return result; }
原文:
List<Widget> _dayHeaders(TextStyle? headerStyle, MaterialLocalizations localizations) { final List<Widget> result = <Widget>[]; for (int i = localizations.firstDayOfWeekIndex; true; i = (i + 1) % 7) { final String weekday = localizations.narrowWeekdays[i]; result.add(ExcludeSemantics( child: Center(child: Text(weekday, style: headerStyle)), )); if (i == (localizations.firstDayOfWeekIndex - 1) % 7) break; } return result; }
localizations.firstDayOfWeekIndex返回值为0或者1,若返回0,则星期日为每周的第一天;若返回1,则星期一为每周的第一天。本文中没有从localizations.firstDayOfWeekIndex获取,直接赋值为1,则每周从星期一开始。
4.补全每个月空白日期:
获取指定月份有多少天
static int getDaysInMonth(int year, int month) { if(month < 1){ year = year - 1; month = month + 12; } if(month > 12){ year = year + 1; month = month - 12; } if (month == DateTime.february) { final bool isLeapYear = (year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0); return isLeapYear ? 29 : 28; } const List<int> daysInMonth = <int>[31, -1, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; return daysInMonth[month - 1]; }
获取指定月份1日的偏移量,即每个月第一天是星期几,若1号是星期3,因为日历每周是从第一天开始的,所以第一周的星期的星期一,星期二为空白,需要补全上个月的倒数后两天,所以还需要获取上个月的最后两天是哪两天。
// 获取日期偏移 static int firstDayOffsets(int year, int month) { final int weekdayFromMonday = DateTime(year, month).weekday - 1; int firstDayOfWeekIndex = 1; firstDayOfWeekIndex = (firstDayOfWeekIndex - 1) % 7; return (weekdayFromMonday - firstDayOfWeekIndex) % 7; } ... // 补全开始日期 int day = -dayOffset; while (day < daysInMonth) { day++; if (day < 1) { dayItems.add(Container( margin: EdgeInsets.all(4.0), alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // daysInPreMonth上个月的天数-本月日期偏移则可把本月开始缺失的日期补全 Text(localizations.formatDecimal(daysInPreMonth - day.abs()), style: TextStyle( fontSize: 14.0, color: Color(0xFF888888), fontWeight: FontWeight.bold)), Visibility( visible: false, child: Container( height: 6.0, width: 6.0, decoration: BoxDecoration( shape: BoxShape.circle, color: Color(0xFFFF8A21), ), ), ), ], ), )); } else { ... } ... } }
补全日历结束日期,每个月最后一天若为星期日,则无需补全,若为星期五则把下个月的前两天补在本月的星期六和星期日:
if ((daysInMonth + dayOffset) % 7 > 0) { // 计算需要补多少天,直接从1开始就好 int addNum = 7 - ((daysInMonth + dayOffset) % 7); for (int i = 1; i <= addNum; i++) { dayItems.add(Container( margin: EdgeInsets.all(4.0), alignment: Alignment.center, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(localizations.formatDecimal(i), style: TextStyle( fontSize: 14.0, color: Color(0xFF888888), fontWeight: FontWeight.bold)), Visibility( visible: false, child: Container( height: 6.0, width: 6.0, decoration: BoxDecoration( shape: BoxShape.circle, color: Color(0xFFFF8A21), ), ), ), ], ), )); } }
计算每个月从星期一开始展示可以展示几行,即计算日历高度,月份不同,高度不同,最少4行,最多6行,根据内容动态显示不至于留大量空白
// 计算一个月有多少天 int daysInMonth = ChinaDateUtils.getDaysInMonth( widget.initialDate.year, widget.initialDate.month); // 计算每个月第一天的星期 int dayOffset = ChinaDateUtils.firstDayOffsets( widget.initialDate.year, widget.initialDate.month); // 计算用多少行展示所有日期 int row = ((daysInMonth + dayOffset) / 7).ceil();
修改这些内容大概可以实现上述效果。
Demo地址:https://gitee.com/masshub/sign_in
到此这篇关于Flutter仿钉钉考勤日历的示例代码的文章就介绍到这了,更多相关Flutter仿钉钉考勤日历内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
Flutter悬浮按钮FloatingActionButton使用详解
本文主要介绍了Flutter悬浮按钮FloatingActionButton使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-07-12- 登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05
Flutter 底部弹窗ModelBottomSheet的使用示例
在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。...2021-06-07- 在实际开发过程中,往往开始是完成功能层面的开发,然而再考虑组件封装和代码优化。当然,组件封装越早做越好,因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05
- 这篇文章主要介绍了Flutter项目在 iOS14 启动崩溃的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了flutter实现点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-26
- Flutter是Google推出的基于Dart语言开发的跨平台开源UI框架,旨在统一纷纷扰扰的跨平台开发框架,在UI层面上多端共用一套Dart代码来实现多平台适配开发,这篇文章主要介绍了flutter的环境安装配置问题,需要的朋友可以参考下...2020-06-09
详解Flutter 调用 Android Native 的方法
这篇文章主要介绍了详解Flutter 调用 Android Native 的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25- 在实际开发中,我们经常会需要在页面跳转的时候携带路由参数,典型的例子就是从列表到详情页的时候,需要携带详情的 id,以便详情页获取对应的数据。同时,有些时候还需要返回时携带参数返回上一级,以便上级页面根据返回结果更新。本篇将介绍这两种情形的实现。...2021-06-18
用Flutter做桌上弹球(绘图(Canvas&CustomPaint)API)
这篇文章主要介绍了用Flutter做桌上弹球 聊聊绘图(Canvas&CustomPaint)API,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-31- 任何一个app基本都会设计一个启动页,今天我们就来看看怎么在flutter项目中设置启动页,这篇文章主要给大家介绍了关于Flutter Android应用启动白屏解决的相关资料,需要的朋友可以参考下...2021-11-11
- 这篇文章主要为大家详细介绍了Flutter实现局部刷新,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-14
- Flutter本身提供了路由机制,本文主要介绍了Flutter fluro配置使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-08
Canonical通过Flutter启用Linux桌面应用程序(推荐)
这篇文章主要介绍了Canonical通过Flutter启用Linux桌面应用程序,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-10- 通常Flutter与Android页面交互是各自独占整个手机屏幕,但有些情况下无法满足需求,有些时候Flutter中没有提供相关插件或者插件不满足需求,这时候就需要开发者自定义插件,开发者可以参考本文中的方法去进行自定义。...2021-06-07
- 这篇文章主要介绍了Flutter中如何使用WillPopScope,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-14
- 这篇文章主要介绍了Flutter深色模式适配的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
- 这篇文章主要介绍了Android如何在原生App中嵌入Flutter,帮助大家更好的理解和学习Android开发,感兴趣的朋友可以了解下...2021-03-13
- 这篇文章主要介绍了Flutter仿钉钉考勤日历的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 大家应该都知道目前Flutter官方是没有自定义键盘的解决方案,下面这篇文章主要给大家介绍了关于Flutter软键盘原理的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-10-08