Flutter日历插件emor_ckcalendar的使用

Flutter日历插件emor_ckcalendar的使用

特性

• 广泛且易于使用的API
• 预配置的UI与可自定义的样式
• 自定义选择生成器以实现无限的UI设计
• 本地化支持
• 范围选择支持
• 多重选择支持
• 动态事件和假期
• 垂直自动调整大小 - 适应内容或填充视口
• 多种日历格式（月、两周、周）
• 水平滑动边界（第一天、最后一天）

使用说明

确保查看示例以获取更多详细信息。

安装

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

dependencies:
  emor_ckcalendar: ^0.0.3

基本设置

完整的示例可在这里找到。

EmorCalendar需要你提供firstDay、lastDay和focusedDay：

• firstDay 是日历的第一个可用日期。用户无法访问该日期之前的日期。
• lastDay 是日历的最后一个可用日期。用户无法访问该日期之后的日期。
• focusedDay 是当前关注的日期。使用此属性来确定当前应显示哪个月份。

EmorCalendar(
  firstDay: DateTime.utc(2010, 10, 16),
  lastDay: DateTime.utc(2030, 3, 14),
  focusedDay: DateTime.now(),
);

添加交互性

你可能会注意到之前设置的日历小部件并不是完全互动的 - 你只能通过左右滑动来更改当前可见的月份。虽然这在某些情况下可能已经足够，但你可以通过指定几个回调使其更加生动。

添加以下代码到日历小部件中，将允许其响应用户的点击操作，并标记被点击的日期为已选中：

selectedDayPredicate: (day) {
  return isSameDay(_selectedDay, day);
},
onDaySelected: (selectedDay, focusedDay) {
  setState(() {
    _selectedDay = selectedDay;
    _focusedDay = focusedDay; // 同时更新 `_focusedDay`
  });
},

为了动态更新可见的日历格式，可以向小部件添加以下代码：

calendarFormat: _calendarFormat,
onFormatChanged: (format) {
  setState(() {
    _calendarFormat = format;
  });
},

这两个更改将使日历更具交互性，并对用户的输入作出响应。

更新focusedDay

将focusedDay设置为静态值意味着每当EmorCalendar小部件重建时，它都会使用特定的focusedDay。你可以通过热重载快速测试这一点：将focusedDay设置为DateTime.now()，然后滑动到下一个月并触发热重载 - 日历将恢复到初始状态。为了避免这种情况发生，你应该在任何回调暴露focusedDay时存储和更新它。

添加以下回调以完成基本设置：

onPageChanged: (focusedDay) {
  _focusedDay = focusedDay;
},

值得注意的是，在onPageChanged()回调内部不需要调用setState()。你应该只更新存储的值，这样如果小部件稍后重建，它会使用正确的focusedDay。

事件

完整的示例可在这里找到。

你可以向EmorCalendar小部件提供自定义事件。为此，使用eventLoader属性 - 你会得到一个DateTime对象，你需要为其分配一个事件列表。

eventLoader: (day) {
  return _getEventsForDay(day);
},

_getEventsForDay()可以是任意实现。例如，可以使用Map<DateTime, List<T>>：

List<Event> _getEventsForDay(DateTime day) {
  return events[day] ?? [];
}

需要注意的是，DateTime对象包含日期和时间部分。在许多情况下，对于日历相关的方面，时间部分是多余的。

如果你决定使用Map，建议使用LinkedHashMap - 这将允许你覆盖两个DateTime对象之间的相等比较，仅根据它们的日期部分进行比较：

final events = LinkedHashMap(
  equals: isSameDay,
  hashCode: getHashCode,
)..addAll(eventSource);

循环事件

eventLoader允许你轻松添加重复的事件。例如，这将在每个星期一添加一个事件：

eventLoader: (day) {
  if (day.weekday == DateTime.monday) {
    return [Event('Cyclic event')];
  }

  return [];
},

点击日期选择事件

通常情况下，希望有一个子列表来表示通过点击日期选择的事件。你可以通过在onDaySelected回调中使用与eventLoader相同的实现方法来实现这一点：

void _onDaySelected(DateTime selectedDay, DateTime focusedDay) {
  if (!isSameDay(_selectedDay, selectedDay)) {
    setState(() {
      _focusedDay = focusedDay;
      _selectedDay = selectedDay;
      _selectedEvents = _getEventsForDay(selectedDay);
    });
  }
}

使用CalendarBuilders自定义UI

要使用自己的小部件自定义UI，可以使用CalendarBuilders。每个生成器可以用来有选择地覆盖UI，允许你实现高度特定的设计而无需太多麻烦。

你可以从任何生成器返回null以使用默认样式。例如，以下代码片段只会覆盖周日的周几标签（Sun），其他周几标签保持不变：

calendarBuilders: CalendarBuilders(
  dowBuilder: (context, day) {
    if (day.weekday == DateTime.sunday) {
      final text = DateFormat.E().format(day);

      return Center(
        child: Text(
          text,
          style: TextStyle(color: Colors.red),
        ),
      );
    }
  },
),

本地化

要将日历显示为你想要的语言，可以使用locale属性。如果不指定它，则会使用默认语言。

初始化

在你可以使用本地化之前，可能需要初始化日期格式化。

一种简单的方法如下：

• 首先，将intl包添加到你的pubspec.yaml文件中。
• 然后修改你的main()函数：

import 'package:intl/date_symbol_data_local.dart';

void main() {
  initializeDateFormatting().then((_) => runApp(MyApp()));
}

完成上述两个步骤后，你的应用应该准备好使用不同语言的EmorCalendar。

指定语言

要指定语言，只需将其作为字符串代码传递给locale属性。

例如，这将使EmorCalendar使用波兰语：

EmorCalendar(
  locale: 'pl_PL',
),