Flutter中如何制作展示全天时段可用性的垂直范围组件？

针对你开发物品一周可用性组件的需求，结合Google/Apple日历的跨时段展示逻辑，给你两个核心部分的实现思路：

一、跨时段展示条实现 #

方案1：自定义绘制（CustomPaint） #

• 先定义基础尺寸：比如一天按24小时划分，每小时对应固定高度（如30px），每列星期的宽度固定
• 遍历每个可用性条目，根据起始/结束时间计算垂直方向的top偏移和总高度，根据星期列计算水平left偏移和宽度
• 通过CustomPainter绘制圆角矩形，支持重叠条目时的偏移调整（比如多个重叠条横向错开）

方案2：Stack + Positioned容器 #

• 将整个日历区域嵌套在Stack中，每个可用性条作为Positioned子组件
• 通过计算好的top（对应起始时间）、left（对应星期列）、height（时段时长）、width（列宽）定位容器，轻松添加点击、长按等交互

二、当前时间标记实现 #

• 把时间标记放在Stack最上层，确保能覆盖所有展示条
• 计算当前时间对应的垂直位置：比如当前时间是14:30，按每小时30px计算，top偏移为14.5 * 30 = 435px
• 用Container绘制贯穿全列的红线，或用CustomPaint绘制带箭头的标记，增强视觉提示

简化代码示例 #

Stack(
  children: [
    // 已实现的左侧星期栏和时段范围
    YourExistingWeekAndTimeColumn(),
    // 生成跨时段展示条
    ...availabilityList.map((item) {
      return Positioned(
        left: _getWeekColumnX(item.weekDay),
        top: _calculateTimeY(item.startTime),
        width: 120, // 单星期列宽度
        height: _calculateDurationHeight(item.startTime, item.endTime),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.blue.withOpacity(0.7),
            borderRadius: BorderRadius.circular(8),
          ),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 8),
            child: Text(item.itemName),
          ),
        ),
      );
    }).toList(),
    // 当前时间标记
    Positioned(
      left: 0,
      right: 0,
      top: _calculateCurrentTimeY(),
      child: Container(height: 2, color: Colors.redAccent),
    ),
  ],
)

// 辅助计算方法示例
double _calculateTimeY(TimeOfDay time) {
  final hourHeight = 30.0; // 每小时高度
  return time.hour * hourHeight + time.minute * (hourHeight / 60);
}

double _calculateDurationHeight(TimeOfDay start, TimeOfDay end) {
  final startMinutes = start.hour * 60 + start.minute;
  final endMinutes = end.hour * 60 + end.minute;
  return (endMinutes - startMinutes) * 0.5; // 对应每小时30px的比例
}

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