Scrollview 不会滚动过去的带有偏移量的视图答案

【问题标题】：Scrollview doesn't scroll past views with an offsetScrollview 不会滚动过去的带有偏移量的视图
【发布时间】：2021-01-07 00:35:55
【问题描述】：

为了解决一个更复杂的问题，我创建了以下简单的测试项目：

struct ContentView: View {
    var body: some View {
        ScrollView {
            ZStack {
                ForEach(0..<50) { index in
                    Text("Test \(index)")
                        .offset(x: 0, y: CGFloat(index * 20))
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这会在 ZStack 中绘制 50 个文本视图，每个视图都有较大的 y 偏移量，因此它们被绘制到屏幕的可见部分之外：

整个东西都包裹在一个 ScrollView 中，所以我希望我应该能够向下滚动到最后一个视图。

但是，它不会滚动到测试 26。

如何通过分配偏移量和更新 ScrollView 的 contentSize 来安排 ZStack 内的视图？

【问题讨论】：

使用 Vstack 而不是 ZStack
在这个特定的示例中，我意识到我只是将视图垂直放置，但这并不重要 - 我试图找出的是如何根据视图更改 contentSize有一个偏移量。
是否应该根据offset值的总和来计算内容大小？
offset 不会改变视图布局，视图保持在创建它的位置，但在偏移位置渲染；其他视图的框架也不受影响。请注意。

标签： swiftui

【解决方案1】：

内容大小由ScrollView内部的视图大小计算得出。所以我们唯一能做的就是改变视图大小。

默认情况下，VStack 大小是其中视图的总大小（实际视图大小）。

在这种情况下，我们也可以使用frame() 来更改大小。检查apple document

由于 VStack 在中间排列视图，我们可以将其对齐到 .top。

struct ContentView: View {
    var body: some View {
        ScrollView() {
            VStack {
                ForEach(0..<50) { index in
                    Text("Test \(index)")
                        .offset(x: 0, y: CGFloat(index * 20))
                }
            }
            .frame( height: 2000, alignment: .top) //<=here
            .border(Color.black)
        }
    }
}

【讨论】：

【解决方案2】：

如果我正确理解了你的意图，那么在这种情况下你根本不需要偏移（SwiftUI 的工作方式不同）

    ScrollView {
        VStack {
            ForEach(0..<50) { index in
                Text("Test \(index)")   // << use .padding if needed
            }
        }
    }

注意：偏移量不会改变视图布局，视图保持在创建它的地方，但在偏移量位置渲染；其他视图的框架也不受影响。请注意。

【讨论】：

谢谢。我最终使用填充在 ZStack 中创建偏移量，这个正确更新了边界。