Flutter交互式日历插件interactive_calendar的使用

Flutter交互式日历插件interactive_calendar的使用

一个用于Flutter的交互式日历包，提供多种显示模式和可定制的样式。

特性

• 使用intl包内置支持本地化。
• 支持暗色模式。
• 可以显示单个月份或整年。
• 高亮特定日期。
• 提供点击高亮和非高亮日期时的回调函数。
• 可自定义文本和高亮颜色。

重要提示: 传递给InteractiveCalendar小部件的currentDate值对应的年份将是显示的年份。如果提供了onNextYear回调，则用户可以导航到下一年。在这种情况下，开发者负责相应地更新currentDate值。

开始使用

要使用此软件包，请在您的pubspec.yaml文件中添加interactive_calendar作为依赖项。

使用方法

首先，导入该包：

import 'package:interactive_calendar/interactive_calendar.dart';

然后可以在代码中这样使用：

InteractiveCalendar(
  highlightedDays: [DateTime.now()],
  onHighlightedDayTap: (DateTime date) {
    print("Tapped on $date");
  },
  currentDate: DateTime.now(),
  darkMode: false,
  displayMode: DisplayMode.column
),

以下是各个属性的含义：

• highlightedDays: 一个包含DateTime对象的列表，表示应在日历上高亮显示的日期。
• onHighlightedDayTap: 用户点击高亮日期时调用的回调函数。
• currentDate: 一个DateTime对象，表示当前日期。日历将显示与该日期相对应的月份和年份。
• darkMode: 一个布尔值，指示是否应以暗色模式显示日历。
• displayMode: 一个枚举值，指示日历的显示模式，可以是DisplayMode.column（全年视图）或DisplayMode.singleMonth（单月视图）。

还可以通过textHighLightColor和highLightColor属性分别自定义高亮日期的文本和背景颜色。

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用InteractiveCalendar：

import 'package:flutter/material.dart';
import 'package:interactive_calendar/interactive_calendar.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(
        title: 'Interactive Calendar Demo',
      ),
    ),
  );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool darkMode = false;
  final controller = PageController();
  var currentDate = DateTime.now();
  final highlightedDays = [
    DateTime(2023, 1, 1),
    DateTime(2023, 1, 7),
    DateTime(2023, 1, 15),
    DateTime(2023, 1, 18),
    DateTime(2023, 2, 2),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        backgroundColor: darkMode ? Colors.black : null,
        appBar: AppBar(
          title: Text(widget.title),
          bottom: const TabBar(
            tabs: [
              Tab(
                text: 'Single Month display',
              ),
              Tab(
                text: 'Column display',
              ),
            ],
          ),
          actions: [
            IconButton(
              onPressed: () {
                setState(() {
                  darkMode = !darkMode;
                });
              },
              icon: Icon(
                darkMode ? Icons.dark_mode_rounded : Icons.light_mode_rounded,
              ),
            )
          ],
        ),
        body: TabBarView(
          children: [
            InteractiveCalendar(
              displayMode: DisplayMode.singleMonth,
              onPreviousYear: previousYear(),
              onHighlightedDayTap: onDayTap,
              onOtherDayTap: onDayTap,
              currentDate: currentDate,
              onNextYear: nextYear(),
              darkMode: darkMode,
              highlightedDays: highlightedDays,
            ),
            InteractiveCalendar(
              displayMode: DisplayMode.column,
              onPreviousYear: previousYear(),
              onHighlightedDayTap: onDayTap,
              currentDate: currentDate,
              onNextYear: nextYear(),
              darkMode: darkMode,
              highlightedDays: highlightedDays,
            ),
          ],
        ),
      ),
    );
  }

  Function()? nextYear() {
    return currentDate.year < 2030
        ? () {
            setState(() {
              currentDate = yearAfter(currentDate);
            });
          }
        : null;
  }

  Function()? previousYear() {
    return currentDate.year > 2020
        ? () {
            setState(() {
              currentDate = yearBefore(currentDate);
            });
          }
        : null;
  }

  void onDayTap(dateTime) {
    showDialog<String>(
      context: context,
      builder: (BuildContext context) {
        final date = DateFormat.yMMMMd().format(dateTime);

        return AlertDialog(
          title: const Text('On Tap'),
          content: Text(date),
          actions: <Widget>[
            TextButton(
              onPressed: () => Navigator.pop(context, 'OK'),
              child: const Text('OK'),
            ),
          ],
        );
      },
    );
  }
}

DateTime yearAfter(DateTime date) {
  return DateTime(
    date.year + 1,
    date.month,
    date.day,
  );
}

DateTime yearBefore(DateTime date) {
  return DateTime(
    date.year - 1,
    date.month,
    date.day,
  );
}