TableCalendar特定日期底部标记截断问题修复咨询

问题描述 #

使用table_calendar: ^3.2.0开发日记页日历功能，需在特定日期下方显示3个圆形标记。通过markerBuilder为28、29日添加标记后，这两个日期的标记底部被截断，但21、22日等日期显示正常，且所有标记布局逻辑一致。已尝试增大TableCalendar组件尺寸、添加内外边距，均无效果，推测是组件内部布局约束导致裁剪。

代码示例 #

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

class MarkerIssueExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: TableCalendar(
            locale: 'ko_KR',
            focusedDay: DateTime.now(),
            firstDay: DateTime.utc(2020, 1, 1),
            lastDay: DateTime.utc(2030, 12, 31),
            rowHeight: 57.8, // 날짜 셀 높이
            calendarStyle: CalendarStyle(
              defaultDecoration: const BoxDecoration(
                shape: BoxShape.rectangle,
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              todayDecoration: BoxDecoration(
                border: Border.all(
                  color: const Color(0xFF7C7C7C),
                  width: 1,
                ),
                shape: BoxShape.rectangle,
                borderRadius: const BorderRadius.all(Radius.circular(10)),
              ),
              markersMaxCount: 3, // 최대 표시 가능한 마커 개수
            ),
            calendarBuilders: CalendarBuilders(
              markerBuilder: (context, day, events) {
                if (day.day == 28 || day.day == 29) {
                  return Transform.translate(
                    offset: const Offset(0, 3), // Y축으로 아래로 이동
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.circle, size: 6, color: Colors.red),
                        SizedBox(width: 4),
                        Icon(Icons.circle, size: 6, color: Colors.blue),
                        SizedBox(width: 4),
                        Icon(Icons.circle, size: 6, color: Colors.green),
                      ],
                    ),
                  );
                }
                return null;
              },
            ),
          ),
        ),
      ),
    );
  }
}

解决方案 #

1. 替换Transform.translate为组件内置的markersOffset #

你用Transform.translate向下偏移标记，只会改变绘制位置，不会扩展单元格的布局空间，超出边界的部分自然会被裁剪。改用CalendarStyle提供的markersOffset属性，它会在布局层面预留空间，避免裁剪：

calendarStyle: CalendarStyle(
  // ... 保留原有样式
  markersMaxCount: 3,
  markersOffset: const Offset(0, 4), // 整体调整标记的Y轴偏移量
),

同时移除markerBuilder中的Transform.translate：

markerBuilder: (context, day, events) {
  if (day.day == 28 || day.day == 29) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.circle, size: 6, color: Colors.red),
        SizedBox(width: 4),
        Icon(Icons.circle, size: 6, color: Colors.blue),
        SizedBox(width: 4),
        Icon(Icons.circle, size: 6, color: Colors.green),
      ],
    );
  }
  return null;
},

2. 适当调高rowHeight #

如果标记仍被截断，说明当前rowHeight不足以容纳日期文字+标记的总高度。可以根据字体大小、标记尺寸调整这个值，比如设置为65：

rowHeight: 65,

3. 为标记添加底部留白 #

需要精细控制时，可在标记外层套一个Padding，给底部留空避免贴紧单元格边界：

markerBuilder: (context, day, events) {
  if (day.day == 28 || day.day == 29) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 2), // 底部留白防止被裁剪
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.circle, size: 6, color: Colors.red),
          SizedBox(width: 4),
          Icon(Icons.circle, size: 6, color: Colors.blue),
          SizedBox(width: 4),
          Icon(Icons.circle, size: 6, color: Colors.green),
        ],
      ),
    );
  }
  return null;
},

关键原因 #

table_calendar的日期单元格有固定布局约束，Transform.translate属于绘制层面的变换，不会改变单元格的实际布局边界，偏移后超出的部分会被组件的裁剪逻辑截断。而markersOffset是组件专为标记布局设计的属性，会配合rowHeight预留足够的显示空间，从根源避免裁剪问题。

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