如何使用flutter table_calendar构建多个不同颜色的标记？

Question

我是 flutter 的新手，从table_calendar示例代码中学习，我正在尝试修改“Widget _buildTableCalendarWithBuilders”，以便它可以打印具有不同颜色的多个标记，有人可以告诉我正确的方法吗？

我需要的结果是当在字符串中找到“Apple”时，打印一个红点。当字符串中找到“Orange”时，打印一个黑点，如果两者都存在，则日期框应该有红点和黑点。

下面是我的代码

        markersBuilder: (context, date, events, holidays) {
          final children = <Widget>[];

          String checkString = events.toString();
          if (checkString.contains('Apple')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.red),
              ),
            );
          }

          if (checkString.contains('Orange')) {
            children.add(
              Positioned(
                right: 1,
                bottom: 1,
                child: _buildEventsMarker2(date, events, Colors.black),
              ),
            );
          }

          if (holidays.isNotEmpty) {
            children.add(
              Positioned(
                right: -2,
                top: -2,
                child: _buildHolidaysMarker(),
              ),
            );
          }

          return children;
        }

我的新小部件

  Widget _buildEventsMarker2(DateTime date, List events, markerColors) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: markerColors,
      ),
      width: 10.0,
      height: 10.0,
    );
  }

Answer 1

您可以通过下面的代码制作多标记。它可以是垂直或水平列表生成器：

calendarBuilders: CalendarBuilders(
                            markerBuilder: (BuildContext context, date, events) {
                              if (events.isEmpty) return SizedBox();
                              return ListView.builder(
                                  shrinkWrap: true,
                                  scrollDirection: Axis.horizontal,
                                  itemCount: events.length,
                                  itemBuilder: (context, index) {
                                    return Container(
                                      margin: const EdgeInsets.only(top: 20),
                                      padding: const EdgeInsets.all(1),
                                      child: Container(
                                        // height: 7,
                                        width: 5,
                                        decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            color: Colors.primaries[
                                                Random().nextInt(Colors.primaries.length)]),
                                      ),
                                    );
                                  });
                            },
                          ),

Answer 2

我找到了两种改变标记颜色的方法。

fabianogadenz 在这里回答了第一个问题：github 链接

第二种方式，我想在选择有事件的日期时切换标记颜色。所以我将 selectedDay 存储在变量中：

DateTime? selectedDay;
    
TableCalendar(
  onDaySelected: (a, b) {
    setState(() {
      selectedDay = a;
    });
  },
)

然后我只是使用 calendarBuilder(singleMarkerBuilder) 将其与事件地图日期进行比较：

final map = <DateTime, List<String>>{
  DateTime.utc(2021, 9, 2): [
    'Event A',
    'Event B',
  ],
  DateTime.utc(2021, 9, 3): [
    "Event C",
  ],
};

TableCalendar(
  calendarBuilders: CalendarBuilders(
    singleMarkerBuilder: (context, date, _) {
      return Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: date == selectedDay ? Colors.white : Colors.black), //Change color
          width: 5.0,
          height: 5.0,
          margin: const EdgeInsets.symmetric(horizontal: 1.5),
      );
    },
  ),
)

结果在这里