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

本文介绍如何使用Flutter的flutter_custom_calendar库创建自定义风格的UI,包括利用controller进行事件监听、控制日历切换、获取日历数据,以及自定义WeekBar和日历Item。此外,还提供了设置日期范围、禁用日期、单选多选模式等功能,并支持添加自定义额外数据,以实现更多功能,如进度条风格的日历。
摘要由CSDN通过智能技术生成
  • 日期范围设置,默认支持的最大日期范围为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; //

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值