首页 > 其他分享 >Flutter 自定义日期范围选择组件,使用更加灵活,满足UI设计需要

Flutter 自定义日期范围选择组件,使用更加灵活,满足UI设计需要

时间:2024-08-23 14:22:10浏览次数:8  
标签:日历 end 自定义 year month UI time DateTime Flutter

一、实现的效果图

二、虽然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];
}

这样基本的日历绘制就没什么问题了,剩下的就是选中的逻辑处理了,完整代码请查看源代码

源代码下载地址

标签:日历,end,自定义,year,month,UI,time,DateTime,Flutter
From: https://blog.csdn.net/a_zhon/article/details/141459494

相关文章

  • 在 Monaco Editor 中自定义右键菜单并支持多级菜单
    在MonacoEditor中自定义右键菜单能够提供更灵活的功能选项。以下是如何在MonacoEditor中实现自定义右键菜单,并支持多级菜单的步骤及关键代码示例。1.初始化MonacoEditor实例首先,需要初始化MonacoEditor实例,并设置基本的编辑器配置。constinitEditor=()=......
  • burpsuite xssValidator插件(xss插件)
    安装1.商城安装插件2.安装环境DownloadPhantomJShttps://phantomjs.org/download.htmlGitHub-NetSPI/xssValidator:ThisisaburpintruderextenderthatisdesignedforautomationandvalidationofXSS......
  • 自定义安装Nginx
    nginx下载地址:https://nginx.org/download/1.下载wgethttps://nginx.org/download/nginx-1.18.0.tar.gz2.安装依赖yum-yinstallgccgcc-c++makeautomakeautoconfpcrepcre-develzlibzlib-developensslopenssl-devellibtool3.解压tar-vxfnginx-1.18.0.tar.......
  • 自定义安装Mysql版本
    自定义安装Mysql版本mysql下载地址:https://downloads.mysql.com/archives/community/1.下载wgethttps://downloads.mysql.com/archives/get/p/23/file/mysql-5.7.28-1.el7.x86_64.rpm-bundle.tar--2024-08-2010:15:39--https://downloads.mysql.com/archives/get/p/23/......
  • YOLOv5实战记录 Gradio搭建Web GUI
    转自:https://blog.csdn.net/EmileJiao/article/details/137448176最终的:importtorchimportgradioasgrmodel=torch.hub.load("./","custom",path="runs/train/exp2/weights/best.pt",source="local")title="基于Gradio......
  • Git GUI与命令全能操作,转载
    Git命令基本操作 GitGUI全能基本操作看https://blog.csdn.net/chehec2010/article/details/89950964  gui目录1、版本库初始化 gitpractise文件夹就变成了Git可以管理的仓库,目录下多了一个.git文件夹,此目录是Git用于管理版本库的,不要擅自改动里面的文件,这样会......
  • 第一个Flutter应用
    用VSCode创建的Flutter应用模板默认是一个简单的计数器示例。下面会仔细讲解一下这个计数器Demo的源码,让读者对Flutter应用程序结构有个基本了解,然后在随后的小节中将会基于此示例,一步一步添加一些新的功能来介绍Flutter应用的其他概念与技术。一、创建Flutter应用模......
  • 关于在得帆云数据中台如何自定义函数
    UDF使用示例场景说明:使用udf编写一个函数Unit_Conversion(value)。在函数中根据value的值进行单位转化,并进行类型转化。1、导入依赖在pom.xml中将如下依赖进行导入。<dependency><groupId>org.apache.hive</groupId><artifactId>hive-exec<......
  • MybatisPlus Caused by: org.apache.ibatis.builder.BuilderException: Error evalua
    报错信息:org.mybatis.spring.MyBatisSystemException:nullatorg.mybatis.spring.MyBatisExceptionTranslator.translateExceptionIfPossible(MyBatisExceptionTranslator.java:97)atorg.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessi......
  • 初识 Flutter
    一、Flutter简介Flutter是Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过Dart语言开发App,一套代码同时运行在iOS和Android平台。Flutter提供了丰富的组件、接口,开发者可以很快地为Flutter添加Native(即原生开发,指基于平台原生语言......