Flutter日历插件r_calendar的使用

1. 开始使用

添加依赖

在 pubspec.yaml 文件中添加 r_calendar 依赖：

dependencies:
  r_calendar: last version

导入包

在 Dart 文件中导入 r_calendar 包：

import 'package:r_calendar/r_calendar.dart';

单选模式

创建一个单选模式的控制器，并设置默认选中的日期：

RCalendarController controller = RCalendarController.single(
  selectedDate: DateTime.now(),
  isAutoSelect: true,
);

多选模式

创建一个多选模式的控制器，并设置默认选中的多个日期：

RCalendarController controller = RCalendarController.multiple(
  selectedDates: [
    DateTime(2019, 12, 1),
    DateTime(2019, 12, 2),
    DateTime(2019, 12, 3),
  ],
  isDispersion: true,
);

值变化监听

添加监听器以观察值的变化：

RCalendarController controller = RCalendarController.multiple(...);
controller.addListener(() {
  // 监听单选模式
  // controller.isAutoSelect
  // controller.selectedDate;

  // 监听多选模式
  // controller.selectedDates;
  // controller.isDispersion;

  // 模式切换（月/周）
  // controller.mode
});

自定义组件

创建自定义的组件：

class MyRCalendarCustomWidget extends RCalendarCustomWidget {
  [@override](/user/override)
  List<Widget> buildWeekListWidget(BuildContext context, MaterialLocalizations localizations){
    // 自定义一周的头部
  }

  [@override](/user/override)
  Widget buildDateTime(BuildContext context, DateTime time, List<RCalendarType> types){
    // 自定义日期展示样式
  }

  [@override](/user/override)
  Widget buildTopWidget(BuildContext context, RCalendarController controller){
    // 自定义顶部显示样式
  }

  [@override](/user/override)
  bool isUnable(DateTime time, bool isSameMonth){
    // 设置日期是否可选
  }

  [@override](/user/override)
  FutureOr<bool> clickInterceptor(BuildContext context, DateTime dateTime){
    // 点击拦截
  }

  [@override](/user/override)
  double get childHeight => 50;
}

2. 使用实例

以下是一个完整的示例，展示了如何使用 r_calendar 插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  RCalendarController controller;

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

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: RCalendarWidget(
        controller: controller,
        customWidget: DefaultRCalendarCustomWidget(),
        firstDate: DateTime(1970, 1, 1),
        lastDate: DateTime(2055, 12, 31),
      ),
    );
  }
}

3. 扩展数据

你可以通过更新扩展数据来动态改变日历显示的内容。例如：

RCalendarController<List<DateTime>> controller = RCalendarController.single(
  initialData: [
    DateTime.now(),
    DateTime.now().add(Duration(days: 1)),
    DateTime.now().add(Duration(days: 2)),
  ]
);

// 如果你想更新扩展数据，可以这样做：
controller.data = [...];

你也可以在自定义组件中获取控制器：

class MyRCalendarCustomWidget extends RCalendarCustomWidget {
  [@override](/user/override)
  Widget buildDateTime(BuildContext context, DateTime time, List<RCalendarType> types) {
    RCalendarController<List<DateTime>> controller = RCalendarMarker.of(context)?.notifier as RCalendarController<List<DateTime>>;
    // 使用控制器进行其他操作
  }
}