SwiftUI offset偏移或padding异常 日历多活动渲染定位错误

问题根因 #

你的布局结构存在逻辑错误：

• 你将每个活动条目放在了ForEach循环的独立容器中，每个容器还设置了固定高度为height，这些容器会在父级VStack中依次垂直排列，天然就会占据对应的垂直空间
• 你再给每个活动叠加offset(y: d.y)，实际最终偏移量等于「前面所有活动容器占据的高度总和」+「你计算的y值」，所以单个活动时没有前置容器占位置，偏移就正常，多个活动时偏移会逐层累加导致错位。
• 另外你当前的y坐标、活动高度计算逻辑也存在错误，和刻度视图的坐标规则不匹配。

修正方案 #

1. 改布局结构：使用ZStack承载所有活动条目，所有活动都在同一个层级内基于顶部坐标偏移，不会有容器堆叠占用空间的问题
2. 修正坐标、高度计算规则，和刻度视图的逻辑对齐

修改后的核心代码 #

struct EventIndicatorView: View {
    var day = [Event]()
    
    init() {
        day.append(createEvent(name: "Matematik", start: 8, end: 9, color: Color.blue))
        day.append(createEvent(name: "Svenska", start: 10, end: 11, color: Color.green))
        day.append(createEvent(name: "Fysik", start: 12, end: 14, color: Color.red))
        day.append(createEvent(name: "Idrott", start: 15, end: 16, color: Color.pink))
    }
    
    func createEvent(name: String, start: Int, end: Int, color: Color) -> Event {
        // 活动高度 = 时长 * 每小时间距
        let eHeight = CGFloat(end - start) * CGFloat(height)
        // 活动y偏移 = 开始小时数 * 每小时间距，和刻度坐标对齐
        let y = CGFloat(start) * CGFloat(height)
        let e = Event(name: name, start: start, end: end, y: y, eHeight: eHeight, color: color)
        return e
    }
    
    var body: some View {
        // 用ZStack承载所有活动，统一基于顶部对齐
        ZStack(alignment: .topLeading) {
            ForEach(day, id: \.self) { d in
                HStack(spacing: 0) {
                    Rectangle()
                        .fill(d.color)
                        .frame(width:5, height: d.eHeight)
                    ZStack(alignment: .topLeading) {
                        Rectangle()
                            .fill(d.color.opacity(0.5))
                            .frame(height: d.eHeight)
                            
                        Text(d.name)
                            .padding(EdgeInsets(top: 4, leading: 4, bottom: 0, trailing: 0))
                            .foregroundColor(d.color)
                            .font(.subheadline.bold())
                    }
                }
                .cornerRadius(4)
                // 只需要偏移x、y即可，没有前置容器占空间
                .offset(x: 60, y: d.y)
            }
            Spacer()
        }
        // 整个活动容器和刻度视图等高，24小时对应总高度24*height
        .frame(maxHeight: 24 * CGFloat(height), alignment: .topLeading)
    }
}

3. 最后将CalenderView和EventIndicatorView放在同一个ZStack中叠加渲染，就能保证刻度和活动完全对齐。

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