Flutter 日历组件简单实现

目录
  • 前言
  • 安装
  • 效果
    • demo 演示
    • 业务使用 headerView
  • 使用
    • 配置属性
    • DEMO
  • 感谢

前言

近期有个业务需求，涉及用户付费相关的计算，需要一个日历组件，组件功能如下：

  • 仅支持从明天开始选择预定日期
  • 仅支持可选范围内的日期
  • 日期的选择是连续的
  • 有个推荐日期，需要联动更新
  • todo:
    • 支持不连续的日期选择

Github：tw_calendar

安装

dependencies:
  tw_calendar: latest_version

效果

demo 演示

业务使用 headerView

使用

配置属性

 /// 开始的年月份
  final DateTime firstDate;
  /// 结束的年月份
  final DateTime lastDate;
  /// 选择开始日期
  final DateTime? selectedStartDate;
  /// 选择结束日期
  final DateTime? selectedEndDate;
  /// 点击方法回调
  final Function? onSelectFinish;
  /// 头部组件
  final Widget? headerView;
  /// 选择模式
  final TWCalendarListSeletedMode? seletedMode;
  /// 月视图高度，为空则占满剩余空间
  final double? monthBodyHeight;
  /// 周视图高度， 默认 48
  final double? weekDayHeight;
  /// 水平间隙
  final double? horizontalSpace;
  /// 确认周视图高度， 默认 66
  final double? ensureViewHeight;
  /// 确认按钮的间隙
  final EdgeInsetsGeometry? ensureViewPadding;
  /// 确认按钮选中颜色
  final Color? ensureViewSelectedColor;
  /// 确认未按钮选中颜色
  final Color? ensureViewUnSelectedColor;
  /// 今天的日期的背景颜色
  final Color? dayNumberTodayColor;
  /// 选中日期背景颜色
  final Color? dayNumberSelectedColor;
  /// 确认按钮字体大小
  final double? ensureTitleFontSize;
  /// 点击回调
  final void Function(DateTime seletedDate, int seletedDays)? onSelectDayRang;
  /// 选择确认按钮 title 回调
  final String Function(
          DateTime? selectStartTime, DateTime? selectEndTime, int seletedDays)?
      onSelectDayTitle;

DEMO

TWCalendarList(
      firstDate: TWCalendarTool.tomorrow,
      lastDate: DateTime(2022, 11, 21),
      selectedStartDate: DateTime(2022, 9, 2),
      selectedEndDate: DateTime(2022, 9, 10),
      monthBodyHeight: 300.w,
      seletedMode: TWCalendarListSeletedMode.singleSerial,
      headerView: Container(
        alignment: Alignment.center,
        height: 55.w,
        child: Text(
          '日历组件',
          style: TextStyle(
            color: TWColors.tw333333,
            fontSize: 18.w,
          ),
        ),
      ),
      onSelectDayRang: ((seletedDate, seletedDays) {
        print('seletedDate : $seletedDate, seletedDays : $seletedDays');
      }),
      onSelectFinish: (selectStartTime, selectEndTime) {
        print(
            'selectStartTime : $selectStartTime, selectEndTime : $selectEndTime');
        Navigator.pop(context);
      },
    )

感谢

参考及修改至 demo: flutter_calendar_list

以上就是Flutter 日历组件简单实现的详细内容，更多关于Flutter 日历组件的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter滚动组件之ListView使用方法详解

    Flutter滚动组件之ListView使用方法详解

    ListView ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型.我们看看ListView的默认构造函数定义: ListView({   ...     //可滚动widget公共参数   Axis scrollDirection = Axis.vertical,   bool reverse = false,   ScrollController controller,   bool primary,   ScrollP

  • Flutter组件状态管理的3种方法

    Flutter组件状态管理的3种方法

    前言 前面讲了Flutter布局,布局只是静态的.在Flutter中,组件分为StatelesslWidget和StatefulWidget. StatelesslWidget 没有状态,是一成不变的.比如图标,文字,按钮等 StatefulWidget 有状态的组件,页面数据是动态的,或者会随着用户操作变化,比如多选框,文本输入框等. 有状态组件 重点来了,如何使用实现一个有状态的组件呢? 有状态的组件一般由两个类构成,一个StatefulWidget子类和一个State子类. State类包

  • Flutter实现单选,复选和开关组件的示例代码

    Flutter实现单选,复选和开关组件的示例代码

    目录 1.开关 Switch 2.单选 Radio 3.复选多选 Checkbox 小结 1.开关 Switch 构造方法: const Switch({ Key? key, required this.value,//当前开关状态 required this.onChanged,// 改变状态回调 this.activeColor,// 开启全部颜色 this.activeTrackColor,// 开启轨道的颜色 this.inactiveThumbColor,//关闭滑块颜色 this.i

  • Flutter绘图组件之CustomPaint使用详解

    Flutter绘图组件之CustomPaint使用详解

    目录 简介 CustomPaint介绍 CustomPainter示例 总结 简介 在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.看在 UI 设计师是一个漂亮小姐姐的份上,又不好意思说这个做不了(那样也很没面子).这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 CuntomPaint 组件.CustomPaint 组件和前端的 Canvas差不多,允许我们在一个画布上绘制各种元

  • Flutter中抽屉组件Drawer使用详解

    本文实例为大家分享了Flutter中抽屉组件Drawer实现代码,供大家参考,具体内容如下 1.概述 Scalfold 是 Flutter MaterialApp 常用的布局 Widget,接受一个 drawer属性,支持配置 Drawer,可以实现从侧边栏拉出导航面板,好处是把一些功能菜单折叠起来,通常Drawer是和Listview组件或者 Column组合使用进行纵向布局.Listview组件是竖排排列的,上下可滑动. [注意]如果没有设置 AppBar 的 leading 属性,则当使用

  • Flutter 日历组件简单实现

    Flutter 日历组件简单实现

    目录 前言 安装 效果 demo 演示 业务使用 headerView 使用 配置属性 DEMO 感谢 前言 近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下: 仅支持从明天开始选择预定日期 仅支持可选范围内的日期 日期的选择是连续的 有个推荐日期,需要联动更新 todo: 支持不连续的日期选择 Github:tw_calendar 安装 dependencies: tw_calendar: latest_version 效果 demo 演示 业务使用 headerVie

  • jQuery实现的简单日历组件定义与用法示例

    jQuery实现的简单日历组件定义与用法示例

    本文实例讲述了jQuery实现的简单日历组件定义与用法.分享给大家供大家参考,具体如下: 说到日历组件,网上一搜一大堆,各种插件啊.集成框架啊实在不少.但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI.bootstrap等.其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了. 好了,废话不多说,直接上代码: 好了,先引入jQuery库.(发表一下感概:angularJS的数据双向绑定着实让我对jQuery的未来担忧了

  • VUE实现日历组件功能

    VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • 浅析微信小程序自定义日历组件及flex布局最后一行对齐问题

    最近为我开源的小项目:微信小程序扩展自定义组件库(点击去GitHub) 增加了一个新组件 -- 日历组件. 效果演示: 在编写过程中,因为大家都知道,日历组件是有固定行数和每一行的固定列数的(即使当前方块内没有值),所以结合小程序"数据优先"的特点,最合适的布局方式一定是flex了! 先说一下大致思路(布局上),笔者将整个组件分为两部分:分别是 头部的当前日期(年月)显示,以及左右两侧的切换按钮 当前切换月份的日期显示 头部的布局自不多说:一个 display:flex; 加上 ali

  • Flutter基本组件Basics Widget学习

    Flutter基本组件Basics Widget学习

    目录 1. 概述 2. 常用组件 2.1 Text 2.1.1 TextStyle 2.1.2 TextSpan 2.1.3 DefaultTextStyle 2.1.4 使用字体 2.2 Button 2.2.1 ElevatedButton 2.2.2 TextButton 2.2.3 OutlinedButton 2.2.4 IconButton 2.2.5 带图标的按钮 2.3 图片及Icon 2.3.1 图片 2.3.2 Icon 2.4 单选开关和复选框 2.4.1 属性 2.5 输

  • 从零写vue日历组件

    从零写vue日历组件

    目录 1.前言 2.vue日历制作 2.1制作月份选择器 2.2制作日历 2.2.1获取当前月所要显示的日期 2.2.2给不同的日期添加不同的样式 2.3将月份选择器和日历组件组合使用 2.4编辑功能 1. 前言 最近做项目遇到一个需求,需要制作一个定制化的日历组件(项目使用的UI框架不能满足需求,算了,我直说了吧,ant design vue的日历组件是真的丑,所以就自己写了一个),如下图所示,需求大致如下:(2)日历可以按照月份进行上下月的切换.(2)按照月份展示周一到周日的排班信息.(3)

  • Android Flutter表格组件Table的使用详解

    Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter刷新组件RefreshIndicator自定义样式demo

    目录 前言 效果图 RefreshIndicator初始样式 RefreshIndicator样式修改(简单) RefreshIndicator样式修改(复杂) 简单的样式修改 复杂的样式修改 前言 RefreshIndicator是Flutter里常见的下拉刷新组件,使用是比较方便的.但由于产品兄弟对其固定的刷新样式很是不满,而且代码中已经引入了很多RefreshIndicator,直接替换其他组件的话,对代码的改动可能比较大,所以只能自己动手改一改源码,在达到产品的要求的同时尽可能减少代码的

随机推荐