如何在Flutter的SfCalendar中添加并显示会议团队成员信息

我使用SfCalendar包按日期展示会议，当前的Meeting对象关联了团队成员列表，希望在日程项的时间区域底部显示这些成员信息。

当前示例代码 #

页面状态类代码 #

class _AllShiftState extends State<AllShift> {
  List<Meeting> _getDataSource() {
    final List<Meeting> meetings = <Meeting>[];
    final DateTime today = DateTime.now();
    final DateTime startTime = DateTime(today.year, today.month, today.day, 9);
    final DateTime endTime = startTime.add(const Duration(hours: 2));
    meetings.add(
      Meeting('Conference', startTime, endTime, const Color(0xFF0F8644), false,
          ["张三", "李四"]),
    );
    return meetings;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfCalendar(
        onTap: (va) {},
        view: CalendarView.schedule,
        appointmentTextStyle: const TextStyle(
          fontSize: 14,
        ),
        dataSource: MeetingDataSource(_getDataSource()),
        monthViewSettings: const MonthViewSettings(
          appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
        ),
      ),
    );
  }
}

自定义CalendarDataSource类代码 #

class MeetingDataSource extends CalendarDataSource {
  MeetingDataSource(List<Meeting> source) {
    appointments = source;
  }

  @override
  DateTime getStartTime(int index) {
    return _getMeetingData(index).from;
  }

  @override
  DateTime getEndTime(int index) {
    return _getMeetingData(index).to;
  }

  @override
  String getSubject(int index) {
    return _getMeetingData(index).eventName;
  }

  @override
  Color getColor(int index) {
    return _getMeetingData(index).background;
  }

  List<String> getMembers(int index) {
    return _getMeetingData(index).members;
  }

  @override
  bool isAllDay(int index) {
    return _getMeetingData(index).isAllDay;
  }

  Meeting _getMeetingData(int index) {
    final dynamic meeting = appointments![index];
    late final Meeting meetingData;
    if (meeting is Meeting) {
      meetingData = meeting;
    }

    return meetingData;
  }
}

要在日程项底部显示成员信息，需借助SfCalendar的appointmentBuilder属性自定义预约UI布局，具体实现如下：

修改页面的build方法，添加自定义预约构建逻辑：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SfCalendar(
      onTap: (va) {},
      view: CalendarView.schedule,
      dataSource: MeetingDataSource(_getDataSource()),
      monthViewSettings: const MonthViewSettings(
        appointmentDisplayMode: MonthAppointmentDisplayMode.appointment,
      ),
      // 自定义预约UI
      appointmentBuilder: (context, details) {
        final MeetingDataSource dataSource = details.dataSource as MeetingDataSource;
        final Meeting meeting = dataSource._getMeetingData(details.appointments[0]);
        return Container(
          decoration: BoxDecoration(
            color: meeting.background,
            borderRadius: BorderRadius.circular(4),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 会议标题
              Text(
                meeting.eventName,
                style: const TextStyle(
                  fontSize: 14,
                  color: Colors.white,
                  fontWeight: FontWeight.w500,
                ),
              ),
              // 成员列表（自动换行）
              Wrap(
                spacing: 6,
                children: meeting.members.map((member) {
                  return Text(
                    member,
                    style: const TextStyle(
                      fontSize: 12,
                      color: Colors.white70,
                    ),
                  );
                }).toList(),
              ),
            ],
          ),
        );
      },
    ),
  );
}

实现说明 #

• 通过appointmentBuilder完全掌控预约的显示样式，用Column垂直排列标题和成员列表，成员列表用Wrap实现自动换行适配不同数量的成员。
• 从数据源中直接获取当前预约的Meeting对象，确保能正确拿到成员列表数据。
• 可根据需求调整字体、颜色、内边距等样式，匹配项目的UI设计规范。

内容的提问来源于stack exchange，提问作者Gbenga B Ayannuga