Flutter使用table_calendar自定义头部切换页后中间文本不更新如何解决？

• 你使用的是StatelessWidget无状态组件，内部状态变更无法触发组件重绘，修改focusedDay后界面不会刷新
• focusedDay和headerText直接定义在build方法中，每次组件重绘都会被重置为当前时间的初始值
• 手动加减30天计算月份的方式不准确，不同月份天数不同，容易出现月份跳转错误
• onCalendarCreated回调中直接覆盖了外部传入的pageController，会导致外部控制器失效

将组件改为StatefulWidget管理可变状态，通过TableCalendar自带的onPageChanged回调同步月份变更，自动更新头部文本。

修改后完整代码 #

import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:intl/intl.dart';

class Calendar extends StatefulWidget {
  const Calendar({
    Key? key,
    required this.pageController,
  }) : super(key: key);

  final PageController pageController;

  @override
  State<Calendar> createState() => _CalendarState();
}

class _CalendarState extends State<Calendar> {
  late DateTime focusedDay = DateTime.now();

  @override
  Widget build(BuildContext context) {
    String headerText = DateFormat.MMMM().format(focusedDay);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 26),
      child: Card(
        color: Colors.white,
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                IconButton(
                  onPressed: () {
                    widget.pageController.previousPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOut,
                    );
                  },
                  icon: const Icon(
                    Icons.keyboard_arrow_left,
                    color: Colors.black,
                  ),
                ),
                Text(headerText),
                IconButton(
                  onPressed: () {
                    widget.pageController.nextPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOut,
                    );
                  },
                  icon: const Icon(
                    Icons.keyboard_arrow_right,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
            TableCalendar(
              firstDay: DateTime.utc(2010, 10, 16),
              lastDay: DateTime.utc(2030, 3, 14),
              focusedDay: focusedDay,
              onCalendarCreated: (controller) {
                // 若需要同步外部控制器可保留，否则直接删除该回调即可
                // widget.pageController = controller;
              },
              headerVisible: false,
              onPageChanged: (newFocusedDay) {
                setState(() {
                  focusedDay = newFocusedDay;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

调用代码无需修改，和原用法一致即可。

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