flutter展示日历插件,自定义标记, flutter

flutter展示日历插件,自定义标记, flutter,第1张

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

效果:

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

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类型的数组,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,
);

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/994105.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存