Flutter CalendarPage横屏模式无法滚动问题求助

问题根源 #

你的代码在SingleChildScrollView内部嵌套了ListView，两者均为可滚动组件，导致手势冲突——ListView会拦截滚动操作，而shrinkWrap: true属性又让它仅占用子组件高度，无法正常触发滚动，最终横屏时内容超出屏幕却无法滚动。

修复方案 #

移除内部的ListView，改用Column替代，让SingleChildScrollView全权处理滚动逻辑：

Widget content() {
  return SingleChildScrollView(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TableCalendar(
          locale: "en_IN",
          rowHeight: 80,
          headerStyle: HeaderStyle(
            formatButtonVisible: false,
            titleCentered: true,
            titleTextStyle:
                TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            headerPadding: EdgeInsets.all(8.0),
            leftChevronPadding:
                EdgeInsets.symmetric(vertical: 20, horizontal: 16),
            rightChevronPadding:
                EdgeInsets.symmetric(vertical: 20, horizontal: 16),
          ),
          availableGestures: AvailableGestures.all,
          selectedDayPredicate: (day) => isSameDay(day, today),
          focusedDay: today,
          firstDay: DateTime.utc(currentYear, currentMonth, 1),
          lastDay: DateTime.utc(currentYear + 1, 1, 31),
          onDaySelected: _onDaySelected,
          calendarBuilders: CalendarBuilders(
            defaultBuilder: (context, day, focusedDay) {
              for (DateTime d in events.keys) {
                if (isSameDay(day, d)) {
                  List<String> casesCounts = events[d] ?? [];
                  String casesCountText = casesCounts
                      .join(', ');
                  return Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8.0),
                      border: isSameDay(day, today)
                          ? Border.all(color: Colors.blueAccent)
                          : Border.all(color: Colors.white),
                    ),
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text(
                            '${day.day}',
                            style: TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              color: isSameDay(day, today)
                                  ? Colors.white
                                  : Colors.black,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(8.0),
                            decoration: BoxDecoration(
                              color: Colors.lightGreen.shade400,
                              borderRadius: BorderRadius.circular(
                                  10.0),
                            ),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Icon(
                                  Icons.calendar_month_sharp,
                                  size: 14,
                                  color: Colors.white,
                                ),
                                SizedBox(width: 5),
                                Text(
                                  casesCountText,
                                  style: const TextStyle(
                                    color: Colors.white,
                                    fontSize: 14,
                                  ),
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  );
                }
              }
              return null;
            },
          ),
        ),
        SizedBox(height: 15),
        Text(
            'Selected Day: ' +
                DateFormat('dd-MMM-yyyy').format(today).toString(),
            style: TextStyle(fontSize: 16)),
        Text(
          '${events[today]?.isNotEmpty ?? false ? 'Number of Cases: ${events[today]!.join(', ')}' : 'No cases found'}',
          style: TextStyle(fontSize: 16),
        ),
      ],
    ),
  );
}

替代方案（保留ListView） #

若需保留ListView，可将其滚动物理属性设置为NeverScrollableScrollPhysics()，让父级SingleChildScrollView处理滚动：

ListView(
  shrinkWrap: true,
  physics: NeverScrollableScrollPhysics(), // 修改此处
  children: [...],
)

额外提醒 #

当前代码仅在页面初始化时调用fetchData()，切换月份后不会重新加载对应月份的数据。若需支持月份切换刷新，可在TableCalendar的onPageChanged回调中更新currentMonth和currentYear并调用fetchData()。

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