如何使用TableCalendar实现日期的取消选中功能？

要实现点击已选中日期时取消选中，你需要手动维护选中状态，覆盖组件默认的选中逻辑，具体步骤如下：

1. 定义选中状态变量
   在你的State类里声明一个可空的DateTime变量，用来存储当前选中的日期：

DateTime? _selectedDay;

2. 处理日期点击事件
   在TableCalendar的onDaySelected回调中，判断点击的日期是否和当前选中日期一致：如果一致就清空选中状态，否则设置为新选中的日期：

onDaySelected: (selectedDay, focusedDay) {
  setState(() {
    if (_selectedDay != null && isSameDay(selectedDay, _selectedDay)) {
      // 点击已选中的日期，取消选中
      _selectedDay = null;
    } else {
      // 选中新日期
      _selectedDay = selectedDay;
    }
    // 更新focusedDay状态
    _focusedDay = focusedDay;
  });
},

3. 绑定选中状态到组件
   把TableCalendar的selectedDay参数设置为你的状态变量，同时通过selectedDayPredicate判断日期是否被选中：

TableCalendar(
  selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
  selectedDay: _selectedDay,
  // 其他必要配置（如firstDay、lastDay、focusedDay等）
)

4. 自定义选中样式（selectedBuilder）
   在selectedBuilder里，只有当当前日期等于_selectedDay时，才渲染带粗黑边框的组件，未选中的日期用defaultBuilder处理：

selectedBuilder: (context, day, focusedDay) {
  return Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.black, width: 2),
    ),
    child: Center(
      child: Text(
        '${day.day}',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    ),
  );
},
defaultBuilder: (context, day, focusedDay) {
  return Center(
    child: Text('${day.day}'),
  );
},

这样配置后，点击已选中的14号时，_selectedDay会被设为null，组件就会移除边框，回到未选中状态。

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