TableCalendar翻页后自动返回上一页问题排查与解决

使用TableCalendar组件开发时存在页面回弹异常：滑动切换日历月份后会自动返回上一页，例如从6月滑动到7月时，页面会自动跳回6月。

页面切换时绑定onPageChanged回调，回调中传入当前页年月参数，调用异步方法加载对应月份的事件数据，初始实现代码如下：

onPageChanged: (date) {
  eventsMap(date.month, date.year);
},

异步加载事件的eventsMap方法逻辑为：先清空已有的事件集合，异步拉取指定年月的事件列表，遍历列表做日期格式转换后，以日期为键存入事件映射，最后调用setState触发组件重建，对应代码：

Future<void> eventsMap(int m, int y) async {
  selectedEvents = {};
  var eventsList = [];
  eventsList = await getEvents(KEY!, m, y);

  for (int i = 0; i < eventsList.length; i++) {
    var inputFormat = DateFormat('MM/dd/yyyy');
    var date1 = inputFormat.parse(eventsList[i].FullDate);

    var outputFormat = DateFormat('yyyy-MM-dd');
    var d = outputFormat.format(date1);
    var date2 = DateTime.parse(d);
    if (selectedEvents.containsKey(date2)) {
      selectedEvents[date2]!.add(Event(eventsList[i].Date,
          eventsList[i].BookingText, eventsList[i].FullDate));
    } else {
      selectedEvents[date2] = [
        Event(eventsList[i].Date, eventsList[i].BookingText,
            eventsList[i].FullDate)
      ];
    }
  }
  setState(() {});
}

TableCalendar的当前显示页面完全由focusedDay参数控制，该参数需要开发者自行维护状态。原始实现没有在页面切换时第一时间更新focusedDay的状态，等异步事件加载完成触发setState时，组件读取到的focusedDay还是旧月份的值，就会自动回弹到旧页面。
另外异步方法一开始就直接清空事件集合，也容易导致组件渲染时状态不一致，加重回弹问题。

• 单独定义状态变量存储日历聚焦日期，例如DateTime _focusedDay = DateTime.now();，将该变量绑定到TableCalendar的focusedDay属性上。
• onPageChanged回调触发时，立即调用setState将_focusedDay更新为回调返回的新日期，不要等事件加载完成再更新，从根源上避免组件读取到旧的日期参数。
• 调整事件加载逻辑，不要在异步请求发起前就清空旧事件，等新的事件数据全部处理完成后，再一次性替换事件集合触发重建，避免状态不一致。

修复后的参考代码：

onPageChanged: (date) {
  // 第一时间更新聚焦日期，保证日历页定位正确不回弹
  setState(() {
    _focusedDay = date;
  });
  // 日期更新完成后再异步加载对应月份事件
  eventsMap(date.month, date.year);
},

Future<void> eventsMap(int m, int y) async {
  // 异步拉取数据期间保留旧事件展示，避免空态闪烁
  var eventsList = await getEvents(KEY!, m, y);
  final Map<DateTime, List<Event>> newEventMap = {};

  for (int i = 0; i < eventsList.length; i++) {
    var inputFormat = DateFormat('MM/dd/yyyy');
    var date1 = inputFormat.parse(eventsList[i].FullDate);

    var outputFormat = DateFormat('yyyy-MM-dd');
    var d = outputFormat.format(date1);
    var date2 = DateTime.parse(d);
    if (newEventMap.containsKey(date2)) {
      newEventMap[date2]!.add(Event(eventsList[i].Date,
          eventsList[i].BookingText, eventsList[i].FullDate));
    } else {
      newEventMap[date2] = [
        Event(eventsList[i].Date, eventsList[i].BookingText,
            eventsList[i].FullDate)
      ];
    }
  }
  // 数据处理完成后一次性更新状态
  setState(() {
    selectedEvents = newEventMap;
  });
}

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