Flutter：Table_calendar 自定义表头更改文本答案

【问题标题】：Flutter: Table_calendar custom header change textFlutter：Table_calendar 自定义表头更改文本
【发布时间】：2021-10-25 11:56:17
【问题描述】：

在我的颤振应用程序中，我使用 table_calendar 包构建无状态小部件。

在这个小部件中，我有一个自定义标题，如果我点击 arrow_left 图标，它会将页面切换到左侧，也与右侧相同。

但中间的文字，例如图片“八月”中的这个文字并没有改变。我该如何解决？

它是这样的：

Calendar(
  pageController: PageController(),
),

日历小部件：

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

  PageController pageController;

  @override
  Widget build(BuildContext context) {
    DateTime focusedDay = DateTime.now();
    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: () {
                    pageController.previousPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOut,
                    );
                    focusedDay = focusedDay.subtract(const Duration(days: 30));
                  },
                  icon: const Icon(
                    Icons.keyboard_arrow_left,
                    color: Colors.black,
                  ),
                ),
                Text(headerText),
                IconButton(
                  onPressed: () {
                    pageController.nextPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOut,
                    );
                    focusedDay = focusedDay.add(const Duration(days: 30));
                  },
                  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) => pageController = controller,
              headerVisible: false,
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以编辑标题样式。使用 headerStyle 。

例子：-

headerStyle: HeaderStyle(
          leftChevronVisible: false,
          rightChevronVisible: false,
          headerPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          titleTextStyle: currentTheme.value == "light"
              ? ThemeText.calenderHeaderTextStyle
              : ThemeText.calenderHeaderTextStyle2,
          formatButtonVisible: false,
        ),

我认为这对你有用。

【讨论】：

【解决方案2】：

在 onPressed 内部调用 SetState

示例如下：

IconButton(
                onPressed: () {
                  print(_focusedDay);
                  pageController.previousPage(
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeOut,
                  );
                  _focusedDay = _focusedDay.subtract(const Duration(days: 30));
                    setState((){});
                },
                icon: const Icon(
                  Icons.keyboard_arrow_left,
                  color: Colors.black,
                ),
              ),

【讨论】：