Flutter日历事件显示异常：仅最后一个匹配项显示X

我用Flutter开发日历组件，实现事件功能时遇到问题：编写了dateVergleich方法判断日期是否关联事件，存在事件则在对应容器显示X。但创建两个事件时，打印日志显示两个事件均匹配成功，却只有第二个日期的容器能显示X。

相关代码 #

Container组件 #

Widget contentContainer(DateTime actualDate) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(),
        color: Colors.yellow.shade100,
      ),
      
      child: dateVergleich(actualDate) ? Text("X") : Text(''),
      width: 200,
      height: 40,
    );
  }

日期对比方法 #

bool dateVergleich(DateTime tagesDatum) {
    final eventModelData = Provider.of<EventModelPro>(context);
    final eventModel = eventModelData.items;
    String tagesDatumString = DateFormat.yMd().format(tagesDatum);
    if (eventModel.isNotEmpty) {
      for (int x = 0; x < eventModel.length; x++) {
        if (tagesDatumString == eventModel[x].id.toString()) {
          vergleich = true;
        } else {
          vergleich = false;
        }
        print('____________');
        print(vergleich);
        print(tagesDatumString);
        print(eventModel[x].id.toString());
      }

日历行生成相关代码 #

列表生成方法

List<List<DateTime>> listeContent() {
      final List<List<DateTime>> gesamtContent = [];
      for (int i = 1; i <= anzahlColumns; i++) {
        final List<DateTime> row = [];
        for (int j = 1; j <= dateMonth; j++) {
          String actualDay;
          if (j < 10) {
            actualDay = changedDate.format('yyyy-MM-0$j');
          } else {
            actualDay = changedDate.format('yyyy-MM-$j');
          }
          DateTime dateTimeactualDay = DateTime.parse(actualDay);
          row.add(dateTimeactualDay);
        }
        gesamtContent.add(row);
      }
      return gesamtContent;
    }

StickyHeadersTable组件

return StickyHeadersTable(
        cellDimensions: CellDimensions.fixed(
          contentCellWidth: 100,
          contentCellHeight: 40,
          stickyLegendWidth: 100,
          stickyLegendHeight: 40,
        ),
        scrollControllers: _scrollController,
        columnsLength: listeColumns().length,
        rowsLength: listeRows().length,
        columnsTitleBuilder: (i) => columnContainer(listeColumns()[i]),
        rowsTitleBuilder: (i) => (currentDayMonthandYear == listeRows()[i])
            ? currentDayContainer(listeRows()[i], listeWeekday()[i])
            : rowContainer(
                listeRows()[i],
                listeWeekday()[i],
              ),
        contentCellBuilder: (i, j) =>
            contentContainer(
              listeContent()[i][j],
            ),
        legendCell: Container()
        );

问题原因与解决方法 #

问题根源 #

dateVergleich方法的循环逻辑错误：遍历所有事件时，只要遇到不匹配的事件，就会把vergleich重置为false。比如第一个日期匹配第一个事件时vergleich设为true，但遍历到第二个事件时不匹配，又将vergleich改成false，最终返回false导致X不显示；而第二个日期匹配第二个事件，遍历结束后vergleich保持true，所以能正常显示。

修复代码 #

修改dateVergleich方法，找到匹配事件后立即返回true，遍历完所有事件无匹配再返回false：

bool dateVergleich(DateTime tagesDatum) {
    final eventModelData = Provider.of<EventModelPro>(context);
    final eventModel = eventModelData.items;
    String tagesDatumString = DateFormat.yMd().format(tagesDatum);
    
    for (var event in eventModel) {
      if (tagesDatumString == event.id.toString()) {
        print('匹配成功：$tagesDatumString');
        return true; // 找到匹配项直接返回true
      }
    }
    return false; // 遍历完无匹配返回false
}

另外，原代码中vergleich变量未声明，建议直接使用返回值替代，避免全局变量带来的潜在问题。

内容的提问来源于stack exchange，提问作者Pauer Auer