如何在Flutter Syncfusion Calendar中点击日程跳转至详情页

问题场景 #

使用Flutter的Syncfusion Calendar插件开发日历应用，已在开启日程列表的月视图中成功展示日程，但无法点击日程；需要实现点击日程列表中的日程时，打开该日程的详情页面。

现有代码如下：

import 'package:calender_alarm/event_info.dart';
import 'package:calender_alarm/event_provider.dart';
import 'package:calender_alarm/event_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

import 'event_editor.dart';

class CalenderPage extends StatelessWidget {
  const CalenderPage({super.key});

  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color.fromARGB(255, 255, 115, 0),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const EventEditingPage()),
        ),
        child: const Icon(Icons.add),
      ),
      body: SfCalendar(
          firstDayOfWeek: 1,
          view: CalendarView.month,
          showDatePickerButton: true,
          allowedViews: const [
            CalendarView.day,
            CalendarView.month,
          ],
          dataSource: EventDataSource(events),
          monthViewSettings: const MonthViewSettings(showAgenda: true),
          minDate: DateTime.now(),
          onTap: //unknown
          ),
    );
  }
}

class EventDataSource extends CalendarDataSource {
  EventDataSource(List<Event> appointments) {
    this.appointments = appointments;
  }

  Event getEvent(int index) => appointments![index] as Event;

  @override
  DateTime getStartTime(int index) => getEvent(index).from;

  @override
  String getSubject(int index) => getEvent(index).title;

  @override
  Color getColor(int index) => getEvent(index).backgroundColor;
}

解决方案 #

通过SfCalendar的onTap回调参数CalendarTapDetails，可以获取到点击的日程实例，之后即可跳转至详情页。以下是修改后的完整代码：

import 'package:calender_alarm/event_info.dart';
import 'package:calender_alarm/event_provider.dart';
import 'package:calender_alarm/event_view.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';

import 'event_editor.dart';

class CalenderPage extends StatelessWidget {
  const CalenderPage({super.key});

  @override
  Widget build(BuildContext context) {
    final events = Provider.of<EventProvider>(context).events;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color.fromARGB(255, 255, 115, 0),
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(builder: (context) => const EventEditingPage()),
        ),
        child: const Icon(Icons.add),
      ),
      body: SfCalendar(
          firstDayOfWeek: 1,
          view: CalendarView.month,
          showDatePickerButton: true,
          allowedViews: const [
            CalendarView.day,
            CalendarView.month,
          ],
          dataSource: EventDataSource(events),
          monthViewSettings: const MonthViewSettings(showAgenda: true),
          minDate: DateTime.now(),
          // 实现点击回调逻辑
          onTap: (CalendarTapDetails details) {
            // 判断点击的是否为日程（月视图agenda列表中的日程会被识别为appointment）
            if (details.appointments != null && details.appointments!.isNotEmpty) {
              // 获取点击的日程实例
              final Event tappedEvent = details.appointments!.first as Event;
              // 跳转到详情页，传递日程数据
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => EventViewPage(event: tappedEvent),
                ),
              );
            }
          },
          ),
    );
  }
}

class EventDataSource extends CalendarDataSource {
  EventDataSource(List<Event> appointments) {
    this.appointments = appointments;
  }

  Event getEvent(int index) => appointments![index] as Event;

  @override
  DateTime getStartTime(int index) => getEvent(index).from;

  @override
  String getSubject(int index) => getEvent(index).title;

  @override
  Color getColor(int index) => getEvent(index).backgroundColor;
}

关键说明 #

• 获取点击的日程：CalendarTapDetails对象的appointments属性会返回点击位置对应的日程列表，月视图的agenda区域点击单一日程时，该列表只会包含一个元素。
• 类型转换：需要将获取到的对象转换为你的Event类实例，确保类型匹配。
• 跳转详情页：通过Navigator.push打开详情页（示例中为EventViewPage），并将选中的Event传递给详情页，以便展示日程详情。

内容的提问来源于stack exchange，提问作者Gašper Melanšek