0


Flutter日历,可以自定义风格UI

  • 日期范围设置,默认支持的最大日期范围为1971.01-2055.12
  • 禁用日期范围设置,比如想实现某范围的日期内可以点击,范围外的日期置灰
  • 支持单选、多选模式,提供多选超过限制个数的回调和多选超过指定范围的回调。
  • 跳转到指定日期,默认支持动画切换
  • 自定义日历Item,支持组合widget的方式和利用canvas绘制的方式
  • 自定义顶部的WeekBar
  • 可以给Item添加自定义的额外数据,实现各种额外的功能。比如实现进度条风格的日历

使用

在pubspec.yaml添加依赖:

flutter_custom_calendar:
git:
url: https://github.com/LXD312569496/flutter_custom_calendar.git

引入flutter_custom_calendar,就可以使用CalendarViewWidget,配置CalendarController就可以了。

import ‘package:flutter_custom_calendar/flutter_custom_calendar.dart’;

CalendarViewWidget({@required this.calendarController, this.boxDecoration});

  • boxDecoration用来配置整体的背景
  • 利用CalendarController来配置一些数据,并且可以通过CalendarController进行一些操作或者事件监听,比如滚动到下一个月,获取当前被选中的Item等等。

下面是CalendarController中一些支持自定义配置的属性。不配置的话,会有对应的默认值。

//默认是单选,可以配置为MODE_SINGLE_SELECT,MODE_MULTI_SELECT
int selectMode;

//日历显示的最小年份和最大年份
int minYear;
int maxYear;

//日历显示的最小年份的月份,最大年份的月份
int minYearMonth;
int maxYearMonth;

//日历显示的当前的年份和月份
int nowYear;
int nowMonth;

//可操作的范围设置,比如点击选择
int minSelectYear;
int minSelectMonth;
int minSelectDay;

int maxSelectYear;
int maxSelectMonth;
int maxSelectDay; //注意:不能超过对应月份的总天数

Set selectedDateList = new Set(); //被选中的日期,用于多选
DateModel selectDateModel; //当前选择项,用于单选

标签: flutter ui

本文转载自: https://blog.csdn.net/2401_83641533/article/details/137195927
版权归原作者 2401_83641533 所有, 如有侵权,请联系我们删除。

“Flutter日历,可以自定义风格UI”的评论:

还没有评论