Flutter仿钉钉考勤日历的示例代码
更新时间：2021年04月23日 11:49:50 作者：阿品
这篇文章主要介绍了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仿钉钉考勤日历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Android之自定义实现BaseAdapter（通用适配器三）
这篇文章主要为大家详细介绍了Android之自定义实现BaseAdapter通用适配器第三篇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
今天小编就为大家分享一篇关于Android整理好的图片压缩工具类，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
app开发中经常会遇到一些输入框要悬浮到软键盘上方的需求,下面这篇文章主要给大家介绍了关于如何使用Android实现一个悬浮在软键盘上的输入栏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了Android实现雅虎新闻摘要加载视差动画效果,通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了Android实现图像切换器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要给大家介绍了关于Flutter里面错误捕获的正确方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了Android实现带签到赢积分功能的日历，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
在项目中遇到需要提供给用户一个密码输入框明文/密文切换显示的需求，今天小编借脚本之家平台给大家分享下Android 实现密码输入框动态明文/密文切换显示效果，需要的朋友参考下2017-01-01
Android编程之DatePicker和TimePicke简单时间监听用法分析
这篇文章主要介绍了Android编程之DatePicker和TimePicke简单时间监听用法,结合具体实例形式分析了时间控件DatePicker和TimePicke布局与具体功能实现技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了Android利用Java优雅消除复杂条件表达式，文章围绕主题展开详细的内容介绍，具有一定的参考价值。感兴趣的小伙伴可以参考一下2022-06-06
最新评论