Flutter中如何调整TableCalendar日历头部高度？

你遇到的问题是TableCalendar的头部蓝色区域默认高度过高，想要调整缩小它，尝试过多种方法但因为包没有直接的高度属性未奏效。

你的现有代码：

Container(
  decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
          topLeft: Radius.circular(40),
          topRight: Radius.circular(40))),
  
  child: TableCalendar(
    daysOfWeekStyle: const DaysOfWeekStyle(
        decoration: BoxDecoration(color: Colors.white)),
    daysOfWeekHeight: 20,

    calendarFormat: CalendarFormat.week,
    weekendDays: const [DateTime.sunday],
    calendarStyle: CalendarStyle(
        todayDecoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            gradient: const LinearGradient(
                colors: [Color(0xFF20264B), Color(0xFF213BCE)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight)),
        rowDecoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(20))),
        weekendTextStyle: const TextStyle(color: Colors.red)),
    headerStyle: HeaderStyle(
      headerMargin: EdgeInsets.only(bottom: 10),
        titleTextStyle: const TextStyle(color: Colors.white, fontSize: 20),
        decoration: BoxDecoration(
          shape: BoxShape.rectangle,
            borderRadius: BorderRadius.circular(50),
            gradient: const LinearGradient(
                colors: [Color(0xFF20264B), Color(0xFF213BCE)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight)),
        formatButtonVisible: false,
        titleCentered: true,
    ),
    firstDay: DateTime.utc(2010, 10, 16),
    lastDay: DateTime.utc(2030, 3, 14),
    focusedDay: DateTime.now(),
  ),
);

解决方案 #

因为TableCalendar的HeaderStyle没有提供直接设置高度的属性，可以通过以下几种变通方法实现：

• 压缩头部内边距+缩小文字
  在HeaderStyle中调整contentPadding来减少上下空白，同时缩小标题字号，直接压缩头部高度：

  headerStyle: HeaderStyle(
    headerMargin: EdgeInsets.only(bottom: 10),
    titleTextStyle: const TextStyle(color: Colors.white, fontSize: 16), // 缩小标题字号
    contentPadding: EdgeInsets.symmetric(vertical: 8), // 压缩上下内边距
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.circular(50),
      gradient: const LinearGradient(
        colors: [Color(0xFF20264B), Color(0xFF213BCE)],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight)),
    formatButtonVisible: false,
    titleCentered: true,
  ),
  

• 完全自定义头部
  隐藏默认头部，自己用Container实现一个固定高度的头部，自由度更高：

  Container(
    decoration: const BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(20),
            bottomRight: Radius.circular(20),
            topLeft: Radius.circular(40),
            topRight: Radius.circular(40))),
    child: Column(
      children: [
        // 自定义固定高度的头部
        Container(
          height: 40, // 直接设置你想要的高度
          margin: EdgeInsets.only(bottom: 10),
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.circular(50),
            gradient: LinearGradient(
              colors: [Color(0xFF20264B), Color(0xFF213BCE)],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight)),
          child: Center(
            child: Text(
              "${DateFormat.yMMMM().format(DateTime.now())}",
              style: const TextStyle(color: Colors.white, fontSize: 16),
            ),
          ),
        ),
        // 日历主体，隐藏默认头部
        TableCalendar(
          headerStyle: HeaderStyle(headerVisible: false),
          daysOfWeekStyle: const DaysOfWeekStyle(
              decoration: BoxDecoration(color: Colors.white)),
          daysOfWeekHeight: 20,
          calendarFormat: CalendarFormat.week,
          weekendDays: const [DateTime.sunday],
          calendarStyle: CalendarStyle(
              todayDecoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  gradient: const LinearGradient(
                      colors: [Color(0xFF20264B), Color(0xFF213BCE)],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight)),
              rowDecoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(20),
                      bottomRight: Radius.circular(20))),
              weekendTextStyle: const TextStyle(color: Colors.red)),
          firstDay: DateTime.utc(2010, 10, 16),
          lastDay: DateTime.utc(2030, 3, 14),
          focusedDay: DateTime.now(),
        ),
      ],
    ),
  );
  

  注意：使用自定义头部时需要导入intl包来处理日期格式化（import 'package:intl/intl.dart';）。

• 调整头部间距
  如果不需要自定义头部，也可以尝试减少headerMargin的值，或者如果显示左右箭头的话，调整leftChevronMargin和rightChevronMargin来减少额外空白。

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