Flutter 日历组件简单实现
更新时间:2022年08月05日 10:03:39 作者:zeqinjie
这篇文章主要为大家介绍了Flutter 日历组件简单实现的图文示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前言
近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下:
- 仅支持从明天开始选择预定日期
- 仅支持可选范围内的日期
- 日期的选择是连续的
- 有个推荐日期,需要联动更新
- 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 日历组件的资料请关注脚本之家其它相关文章!
相关文章
Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)
这篇文章主要介绍了 Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网),非常不错,具有参考借鉴价值,需要的朋友可以参考下2017-03-03Android4.4开发之电池低电量告警提示原理与实现方法分析
这篇文章主要介绍了Android4.4开发之电池低电量告警提示原理与实现方法,结合实例形式分析了Android4.4电池电量警告的原理及相关操作技巧,需要的朋友可以参考下2017-09-09丢失Android系统库或者Conversion to Dalvik format failed with error
这篇文章主要介绍了丢失Android系统库或者Conversion to Dalvik format failed with error 1错误的解决方法,分析了Android系统库丢失及版本问题的处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论