android仿钉钉日程日历,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 _dayHeaders() {
final List result = [];
final List 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 _dayHeaders(TextStyle? headerStyle, MaterialLocalizations localizations) {
final List result = [];
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 daysInMonth = [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();
修改这些内容大概可以实现上述效果。
到此这篇关于Flutter仿钉钉考勤日历的示例代码的文章就介绍到这了,更多相关Flutter仿钉钉考勤日历内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
android仿钉钉日程日历,Flutter仿钉钉考勤日历的示例代码相关推荐
- android 钉钉考勤日历,Flutter仿钉钉考勤日历
作用 原型 开发 运用 // 考勤日历 DatePickerDialog( initialDate: DateTime.now(), firstDate: DateTime(2020), lastDa ...
- 《阿里巴巴Android开发手册》v1.0.1更新,优化部分内容和示例代码
摘要: 春节余味尚未消,我们为移动开发者准备了一份迟到的新年礼物--<阿里巴巴Android开发手册>,继<阿里巴巴Java开发手册>之后,阿里巴巴开发规范家族又添一丁,「阿里 ...
- 日历签到 java_java编写全年考勤日历
本文实例为大家分享了java编写全年考勤日历的具体代码,供大家参考,具体内容如下 JAVA代码: package com.wp.action; import java.text.SimpleDateF ...
- android自定义push通知_android通过自定义toast实现悬浮通知效果的示例代码
android通过toast实现悬浮通知效果,如图: 实现的功能: 自定义悬浮弹窗: 点击其他地方该布局不受影响: 可自定义显示时间: 可以设置点击事件: 代码如下: import android.c ...
- android java加密_Android、iOS和Java通用的AES128加密解密示例代码
前言 移动端越来越火了,我们在开发过程中,总会碰到要和移动端打交道的场景,比如android和iOS的打交道.为了让数据交互更安全,我们需要对数据进行加密传输. 这篇文章给大家分享AES的加密和解密. ...
- android 8.0后台定位,Android8.0适配前台定位服务service的示例代码
从Android 8.0开始系统为实现降低功耗,对后台应用获取用户位置信息频率进行了限制,每小时只允许更新几次位置信息,详细信息请参考官方说明.按照官方指引,如果要提高位置更新频率,需要后台应用提供一 ...
- android 模拟器 vscode,解决夜神模拟器启动后 VSCode仍然No Device问题(示例代码)
1.搜索cmd进入终端: 2.cd进入夜神模拟器安装处的bin目录下,如:D:Noxin: 3.执行命令:nox_adb.exe connect 127.0.0.1:62001. 再次打开vscode ...
- android高仿小米日历,高仿钉钉和小米的日历控件
i# 简介 这是一个高仿钉钉和小米的日历控件,支持快速滑动,界面缓存.想要定制化UI,使用起来非常简单,就像使用ListView一样 一些特点: 可以自定义日历控件UI 支持快速滑动 支持农历和阳历 ...
- Flutter仿钉钉打卡日历
效果 原型 开发 使用 // 考勤日历DatePickerDialog(initialDate: DateTime.now(),firstDate: DateTime(2020),lastDate: ...
最新文章
- 牛客小白月赛5-F题: 圆(circle)
- QT OpenCV Linux
- 3x3,5x5,7x7卷积核识别效率对比
- 107. Leetcode 123. 买卖股票的最佳时机 III (动态规划-股票交易)
- demo4 debug - create class instance - component works as type
- 改写DataCogs在MOSS列表中实现三级联动字段
- wireshark分析SIP协议——注册
- git安装后找不见版本_结果发现git版本为1.7.4,(git --version)而官方提示必须是1.7.10及以后版本...
- MYSQL 索引事务日志概述
- GIS技巧100例25-ArcGIS之shp文件修复
- 如何选择和设置SEO关键词
- 计算机出现蓝屏怎么恢复,重启电脑后出现蓝屏怎么办
- Contrastive Loss (对比损失)
- 用html和css制作九宫格,我就是要用CSS实现九宫格图
- 【无人机】基于matlab粒子群算法优化干扰受限下无人机群辅助网络【含Matlab源码 2245期】
- 微信看看对方是不是把你删除了
- dell一键还原出厂设置(dell一键还原出厂设置找不到恢复环境)
- In aggregated query without GROUP BY
- 用scrapy爬取妹子图网的图片,附上源代码
- 水晶报表导出Excel多出空白页不完全解决方案
热门文章
- Linux LVM全面实践
- 计算机多通道存储器工作原理,多通道大容量的采集存储器的设计与实现 - 全文...
- 酒浓码浓 - HTML5微数据/itemscope/itemtype/itemprop
- Win10__查看设备管理器中的端口
- 【教程】关于打开一些exe文件时,打开方式为microsoft store的解决办法
- 二战计算机技术,重庆大学超强二战跨考计算机技术专业经验,学习方法
- 明日之后最新服务器开服时间,明日之后什么时候开服 新服开区详解
- android app unlock sim pin,android Sim卡锁定 pin解锁流程学习
- 扫描二维码下载app
- 计算机的主板显卡内存条怎么查,电脑显卡在哪看?查看自己电脑显卡的显存等信息的方法...