如何设置calendar_view日历组件的显示小时范围？

虽然官方文档没有提供直接配置小时范围的参数，但可以通过以下几种方式实现需求：

1. 自定义时间轴渲染（适配日/周视图） #

日视图和周视图的时间轴支持自定义构建，你可以通过timeLineBuilder过滤掉非目标时段的小时：

DayView(
  timeLineBuilder: (date) {
    // 只保留7:00到16:00的小时刻度
    if (date.hour >= 7 && date.hour <= 16) {
      return Text('${date.hour > 12 ? date.hour - 12 : date.hour}:00 ${date.hour >=12 ? 'PM' : 'AM'}');
    }
    // 隐藏其他时段的刻度
    return const SizedBox.shrink();
  },
  // 保留你原有的其他配置
)

这种方式会直接隐藏非目标时段的时间轴，同时建议调整视图高度，让布局更紧凑。

2. 滚动偏移+固定高度（快速适配） #

如果不想自定义构建器，可通过滚动控制器和固定视图高度来实现：

// 假设每个小时占80px高度，7:00对应的初始偏移为7*80=560px
final ScrollController _hourScrollController = ScrollController(initialScrollOffset: 560.0);

DayView(
  controller: _hourScrollController,
  // 固定高度为(16-7+1)*80=720px，刚好覆盖7:00到16:00的时段
  height: 720.0,
  // 保留你原有的其他配置
)

需要根据你实际的小时刻度高度调整数值，这种方式更快捷但灵活性稍弱。

3. 月视图的时段过滤 #

月视图本身没有小时轴，若要限制展示的日程时段，可提前过滤事件数据：

// 过滤出7:00到16:00之间的日程
final filteredEvents = allEvents.where((event) {
  final startHour = event.startTime.hour;
  final endHour = event.endTime.hour;
  return startHour >=7 && endHour <=16;
}).toList();

MonthView(
  events: filteredEvents,
  // 保留你原有的其他配置
)

这样月视图只会展示目标时段内的日程事件。

以上都是基于现有API的扩展方案，后续可以关注包的更新，看是否会新增官方的小时范围配置项。

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