Flutter自制插件之r_calendar日历插件

image

r_calendar

📅📆Flutter日历插件,支持自定义日历,月视图/周视图切换、点击拦截、单选(切换月自动选)、多选(散选/聚选)

.----------------------------------------------

| github地址:

| https://github.com/rhymelph/r_calendar

| pub地址:

| https://pub.dev/packages/r_calendar

| apk体验:

| https://fir.im/2aut

`----------------------------------------------

  • [✔] 月视图/周视图切换
  • [✔] 自定义日历
  • [✔] 点击拦截
  • [✔] 单选,切换月/周自动选
  • [✔] 多选,散选/聚选

1.如何使用.

  • pubspec.yaml文件添加依赖
dependencies:
    r_calendar: last version
  • 导入包
import 'package:r_calendar/r_calendar.dart';

  • 单选控制器初始化
///
/// [selectedDate] 默认选中的那天
/// [isAutoSelect] 当月份改变时,是否自动选中对应的月份的同一天

    RCalendarController controller= RCalendarController.single(
                    selectedDate: DateTime.now(),
                    isAutoSelect: true,);
  • 多选控制器初始化
///
/// [selectedDates] 默认选中的日期数组
/// [isDispersion] 是否散选,否则为连续选中

    RCalendarController controller = RCalendarController.multiple(
                    selectedDates: [
                        DateTime(2019, 12, 1),
                        DateTime(2019, 12, 2),
                        DateTime(2019, 12, 3),
                    ],
                    isDispersion: true);
  • 周视图/月视图(默认月视图)
///
/// [mode] 模式
/// -   RCalendarMode.week 周视图模式
/// -   RCalendarMode.month 月视图模式

    RCalendarController controller = RCalendarController.single(
                    mode:RCalendarMode.week);
  • 数据变化监听
/// 添加监听器观察值的变化
    RCalendarController controller = RCalendarController.multiple(...)
    ..addListener((){
    // 是否为多选
    // controller.isMultiple

    // 单选下
    // 当月份改变时,是否自动选中对应的月份的同一天
    // controller.isAutoSelect
    // 当前选中的日期
    // controller.selectedDate;

    // 多选
    // 是否散选,否则为连续选中
    // controller.isDispersion;
    // 当前选中的日期列表
    // controller.selectedDates;

    // 周视图/月视图
    // controller.mode
    });
  • 自定义日历

class MyRCalendarCustomWidget extends RCalendarCustomWidget {
  // 如果你想设置第一天是星期一,请更改MaterialLocalizations 的firstDayOfWeekIndex
  // 日 一 二 三 四 五 六
  //构建头部
  @override
  List<Widget> buildWeekListWidget(BuildContext context,MaterialLocalizations localizations){...};

  // 1 2 3 4 5 6 7
  //构建普通的日期
  @override
  Widget buildDateTime(BuildContext context,DateTime time, List<RCalendarType> types){...};

  //   <  2019年 11月 >
  //构建年份和月份 左指示器、右指示器,返回null就没有
  @override
  Widget buildTopWidget(BuildContext context,RCalendarController controller){...};

  //是否不可用,不可用时,无点击事件
  @override
  bool isUnable(DateTime time, bool isSameMonth){...};

  //点击拦截,当返回true时进行拦截,就不会改变选中日期
  @override
  FutureOr<bool> clickInterceptor(BuildContext context,DateTime dateTime){...};

  //子view的高度
  @override
  double get childHeight=>{...};
}

2.使用它.

import 'package:flutter/material.dart';
import 'package:r_calendar/r_calendar.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  RCalendarController controller;

  @override
  void initState() {
    super.initState();
    controller = RCalendarController.multiple(selectedDates: [
      DateTime(2019, 12, 1),
      DateTime(2019, 12, 2),
      DateTime(2019, 12, 3),
    ]);
//    controller = RCalendarController.single(selectedDate: DateTime.now(),isAutoSelect: true);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RCalendarWidget(
               controller: controller,
               customWidget: DefaultRCalendarCustomWidget(),
               firstDate: DateTime(1970, 1, 1), //当前日历的最小日期
               lastDate: DateTime(2055, 12, 31),//当前日历的最大日期
             ),
    );
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,051评论 0 13
  • 叶下倒悬玲珑塔, 叶上青藤绕指柔, 青衣紫衫皆爽口, 浅尝可消万古愁。 大家猜猜看,诗里描绘的是什么呀!~
    何苦_1a91阅读 264评论 2 2
  • 在好多人眼里直接把幸福和婚姻挂钩,好像只有进入了婚姻才有资格谈幸福,所以才有了那么多不欢而散的婚姻。 ...
    公木白阅读 183评论 0 1
  • ——“你喜欢梅西吗?” ——“我喜欢英雄联盟”。 ——“哦,再见”
    鲠子阅读 157评论 0 0
  • 31.じゃんけん 非常简单但是非常常用的一句日语,就是「猜拳」的意思。我们猜拳时南北方有不同的说法,上海人说「洞里...
    撒浪嘿呦233阅读 264评论 0 0