SwiftUI每日时间线日历开发求助：事件时间对齐与跨小时展示

问题描述 #

我正在开发SwiftUI每日日历列表，目前已通过VStack循环生成8-17点的垂直时间轴及分割线，效果类似苹果日历空白视图，但无法实现两个核心功能：

1. 将从MSGraph获取的带startDate和endDate的日历事件对齐到对应时间点
2. 长事件跨多小时展示

不需要事件拖拽功能，仅需查看功能，希望自行开发而非使用第三方包，现有代码如下：

struct ContentView: View {
 var body: some View {
  ScrollView {
   VStack(alignment: .leading) {
    ForEach(8..<17) { index in
      Text("\(index)")
      Divider()
       .offset(y: -22)
       .padding(.leading, 30)
      Spacer()
     }
    }
   }
   .frame(maxWidth: .infinity, alignment: .leading)
   .padding()
  }
}

核心实现思路 #

1. 重构布局为ZStack叠加结构 #

现有VStack仅处理时间刻度和分割线，要展示事件需要把时间轴和事件层放在同一个ZStack中，让事件悬浮在时间轴上方：

• 保留原VStack作为底层时间轴，调整布局让每个小时刻度占据固定高度（比如80pt）
• 在ZStack上层添加独立的事件容器，用于承载所有日历事件

2. 事件位置与高度的精准计算 #

先把startDate和endDate转换为当天的小时小数（比如9:30对应9.5，14:15对应14.25），再基于时间轴的每小时高度计算事件的布局参数：

• 起始偏移量：(事件起始小时数 - 8) * 每小时高度，用于将事件对齐到对应时间点
• 事件高度：(事件结束小时数 - 起始小时数) * 每小时高度，实现跨小时展示
• 处理边界情况：如果事件早于8点或晚于17点，直接截断到时间轴范围内

3. 事件视图的布局与样式 #

用offset控制事件的Y轴位置，配合固定高度实现对齐和跨小时效果：

• 事件视图避开左侧时间刻度区域，通过padding(.leading)留出刻度空间
• 给事件添加背景色、圆角、阴影等样式，增强辨识度
• 短事件（比如15分钟）要保证内容正常显示，可限制最小高度或调整字体大小

4. 重叠事件优化（可选） #

如果存在同一时间段的重叠事件，可通过以下方式避免遮挡：

• 按重叠数量均分事件宽度，比如两个重叠事件各占45%宽度，分别靠左/右偏移
• 给重叠事件添加不同的背景色，增强区分度

示例代码片段 #

// 定义事件模型
struct CalendarEvent: Identifiable {
    let id = UUID()
    let title: String
    let startDate: Date
    let endDate: Date
    let color: Color
}

// 时间转换工具方法
extension CalendarEvent {
    func startHour() -> Double {
        let calendar = Calendar.current
        let hour = Double(calendar.component(.hour, from: startDate))
        let minute = Double(calendar.component(.minute, from: startDate)) / 60
        return hour + minute
    }
    
    func endHour() -> Double {
        let calendar = Calendar.current
        let hour = Double(calendar.component(.hour, from: endDate))
        let minute = Double(calendar.component(.minute, from: endDate)) / 60
        return hour + minute
    }
}

// 重构后的日历视图
struct ContentView: View {
    // 替换为从MSGraph获取的真实数据
    let events: [CalendarEvent] = [
        CalendarEvent(title: "团队同步会", startDate: Date().addingTimeInterval(3600*1.5), endDate: Date().addingTimeInterval(3600*3), color: .blue),
        CalendarEvent(title: "项目评审", startDate: Date().addingTimeInterval(3600*2), endDate: Date().addingTimeInterval(3600*4.5), color: .green)
    ]
    let hourHeight: CGFloat = 80 // 每小时固定高度

    var body: some View {
        ScrollView {
            ZStack(alignment: .leading) {
                // 底层时间轴
                VStack(alignment: .leading, spacing: 0) {
                    ForEach(8..<17) { index in
                        HStack {
                            Text("\(index):00")
                                .frame(width: 50, alignment: .leading)
                            Spacer()
                        }
                        .frame(height: hourHeight)
                        Divider()
                    }
                }

                // 上层事件层
                VStack(spacing: 0) {
                    ForEach(events) { event in
                        let startOffset = (event.startHour() - 8) * Double(hourHeight)
                        let eventHeight = (event.endHour() - event.startHour()) * Double(hourHeight)

                        eventView(event)
                            .frame(height: CGFloat(eventHeight))
                            .offset(y: CGFloat(startOffset))
                            .padding(.leading, 60)
                    }
                }
            }
            .frame(maxWidth: .infinity)
            .padding()
        }
    }

    // 事件卡片视图
    func eventView(_ event: CalendarEvent) -> some View {
        HStack {
            Text(event.title)
                .foregroundColor(.white)
                .padding(.horizontal)
            Spacer()
        }
        .background(event.color)
        .cornerRadius(6)
        .shadow(radius: 2)
    }
}

关键注意事项 #

• 处理时区：MSGraph返回的时间可能是UTC，需转换为本地时间再计算
• 边界截断：事件超出8-17点范围时，直接截取时间轴内的部分展示
• 性能优化：事件数量较多时，可考虑使用LazyVStack替代普通VStack

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