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

Posted 2023-02-24

【中文标题】Scrollview 不会滚动过去的带有偏移量的视图

【英文标题】：Scrollview doesn't scroll past views with an offset

【发布时间】：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 不会改变视图布局，视图保持在创建它的位置，但在偏移位置渲染；其他视图的框架也不受影响。请注意。

【参考方案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 中创建偏移量，这个正确更新了边界。