flutter 日历展示插件

2021-12-07 12:39:05 浏览数 (1)

flutter 日历展示插件

前几天在做项目时,需要一个展示日历,自己上:pub.dev/插件官网上找了好久都没找到合适的,最后自己慢慢翻,终于找到一个评分高,最近在更新的插件:pub.dev/packages/fl… flutter_calendar_carousel: ^2.1.0

效果:

引入:import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart'; // 日历2 使用方法:

代码语言:javascript复制
CalendarCarousel(
    // 日期的点击事件
    onDayPressed: (DateTime date, List events) {
        // date点击的日期
    },
    // 最大只能点今天之前
    maxSelectedDate: DateTime.now(),
    // 语言
    locale: 'zh',
    // 月份发生改变的时候
    onCalendarChanged: (e) {
        print('******'   e.toString());// 更改月份的开始的日期
        // 月份切换的时候可以设置默认标记的日期dateTimeList,就能动态设置标记日期
    },
    thisMonthDayBorderColor: Colors.grey,
    customDayBuilder: (
        bool isSelectable,
        int index,
        bool isSelectedDay,
        bool isToday,
        bool isPrevMonthDay,
        TextStyle textStyle,
        bool isNextMonthDay,
        bool isThisMonthDay,
        DateTime day,
    ) {
        // 默认标记
        // 这里的dateTimeList是一个List<DateTime>类型的数组,contains是判断数组中是否包含day,如果包含就自定义样式
        // 这里的day是这个月的每一天,这个插件会自动循环每一天,然后我们来判断当前的那一天在不在默认标记中
        if (dateTimeList.contains(day)) {
            return Center(
                child: Text(
                    day.day.toString(),
                    style: TextStyle(
                        color: Colors.blue,
                    ),
                ),
            );
        } else {
            return null;
        }
    },
    weekendTextStyle: TextStyle(color: Colors.black),// 周六周天颜色
    height: 420.0,// 高度
    selectedDateTime: _currentDate,// 选中的日子
    daysHaveCircularBorder: false,
);

0 人点赞