在 swiftui 中创建时间轴视图会弄乱对齐

Question

我需要在 SwiftUI（2.0，iOS14）中创建一个可以平移和缩放的交互式“时间轴”视图。想想媒体播放器的进度视图，但它是交互式的。音频需要某种形状（我刚刚选择了 RoundedRectangle 作为下面的示例）并且“当前”时间需要表示为屏幕中间的垂直（黄色）线。

因为我需要能够设置和获取偏移量，所以我无法使用水平 ScrollView。相反，我只是想根据缩放级别更改形状的框架大小。然后将“当前”时间线绘制为叠加层。在缩放级别高达 0.5 时，一切正常。

然而，当我放大时（即使 zoomLevel 的值小于 0.45），对齐就乱七八糟了。我尝试过 ZStack 和其他一些组合，但没有成功。我认为问题是形状大小导致叠加层的位置计算错误，但即使 ZStack 对齐方式设置为 [.leading, .center] 我也无法使黄线和形状对齐。

这是代码。我该怎么做才能确保在调整形状大小时正确计算叠加黄线以及形状的偏移量，以便它们保持在屏幕中央？

    let zoomLevel:CGFloat = 1  // This is the value being modified
    var body: some View {
        GeometryReader { geometry in
                RoundedRectangle(cornerRadius: 5)
                    .offset(x: getOffset(with: geometry.size.width))
                    .frame(width: getWidth(with: geometry.size.width), height: 150)
                    .overlay(Rectangle()
                            .frame(width: 2, height: geometry.size.height/5)
                            .foregroundColor(.yellow)
                    )
                    .frame(maxWidth: .infinity)
                }
        }
    }

函数是：

    
    private func getOffset(with width: CGFloat)->CGFloat {
        let currentWidth = getWidth(with: width)
        let offset = currentWidth/2 + 0  // 0 would be replaced with pan offset later

        if offset > currentWidth/2 {
            return currentWidth/2
        } else if offset < -currentWidth/2 {
            return -currentWidth/2
        }
        return offset
    }
    
    private func getWidth(with width: CGFloat)->CGFloat {
        return 0.45*width/zoomLevel
    }

Answer 1

感谢@Baglan，这已解决 - 我需要设置 .frame(width: geometry.size.width) 而不是 .frame(maxWidth: .infinity)

在 swiftui 中创建时间轴视图会弄乱对齐

Creating a timeline view in swiftui messes up alignment

alignment

swiftui