Flutter自制插件之r_calendar日曆插件

r_calendar

📅📆Flutter日曆插件，支持自定義日曆，月視圖/周視圖切換、點擊攔截、單選（切換月自動選）、多選（散選/聚選）
.----------------------------------------------
| github地址:
| github.com/rhymelph/r_…
| apk體驗：
| 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),//當前日曆的最大日期
             ),
    );
  }
}

複製代碼