iOS 17 SwiftUI：滚动时使用containerRelativeFrame重叠ScrollView中的颜色视图

Question

我在 iOS 17 上的 SwiftUI 中遇到布局问题，当我向下滚动时，

Color

内的

VStack

中的

ScrollView

视图开始重叠。每个

Color

视图都应该占据整个容器的相对框架，但当我滚动时，下一个

Color

视图会侵占前一个视图的空间。随着进一步滚动，这个问题变得更加复杂，随后的视图占用越来越多的空间。

我附上了一个视频来演示该问题，这是重现该问题的代码。只需复制并粘贴即可。

struct TestView: View {
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                ForEach(0..<10, id:\.self) { idx in
                    Color.random()
                    .containerRelativeFrame([.horizontal, .vertical])
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.paging)
    }
}

#Preview {
    TestView()
}

我对每个颜色视图使用

.containerRelativeFrame([.horizontal, .vertical])

以使它们填充可用空间，并在

.scrollTargetLayout()

上使用

VStack

。

.scrollTargetBehavior(.paging)

修饰符应用于

ScrollView

以启用分页行为。

预期的结果是每个颜色视图占据自己的页面空间而不影响其他颜色视图。但是，当我滚动时，布局开始中断，如视频所示。

有没有人经历过类似的事情或者可以提供有关可能导致此问题的原因的见解？

我的环境：

模拟器运行版本：

iOS 17.0

XCode 版本：

15.0.1 (15A507)

Swift 版本：

swift-driver version: 1.87.1 Apple Swift version 5.9 (swiftlang-5.9.0.128.108 clang-1500.0.40.1) Target: x86_64-apple-macosx13.0

Answer 1

我认为这一定是一个错误。

它似乎错误地补偿了底部插图。如果您在 iPhone SE 上尝试，那么它会起作用，因为底部插图是 0。否则，“滑动”似乎是底部插图大小的一半。

可能的解决方法：

1. 忽略底部安全区域插图

ScrollView(.vertical, showsIndicators: false) {
    // content as before
}
.scrollTargetBehavior(.paging)
.ignoresSafeArea(edges: .bottom) // <- ADDED

2. 使用

   GeometryReader

   测量安全区域插入并相应地设置

   VStack

   间距

GeometryReader { proxy in // <- ADDED
    ScrollView(.vertical, showsIndicators: false) {
        VStack(spacing: proxy.safeAreaInsets.bottom / 2) { // <- CHANGED
            // content as before
        }
        .scrollTargetLayout()
    }
    .scrollTargetBehavior(.paging)
}

如果可以的话，我会选择第一个解决方法，因为如果该错误在未来版本中得到修复，那么它应该仍然可以继续工作。

诗。您可能想将该错误作为反馈报告给 Apple。