GeometryReader在ScrollView中折叠GeometryReader，而不考虑子大小。

Question

我试图创建一个子视图，其中包含一个绘图，我希望它的大小与父容器的一小部分成比例。

这很好，除非放在层次结构的某个地方的滚动视图中。

从屏幕截图中可以看出，当堆栈中的声音最大时，正如预期的那样。但是，当你把一个滚动视图中的几何读取器的大小折叠到接近于零时，它的子对象就会溢出它的边界。就好像它在一个不同的Z索引上呈现它的子代一样。事实上，如果您从几何呈现内容中删除包装VStack，它实际上并不像包装在ZStack中那样布局它的所有子级。

编辑：要清楚: ScrollView不属于组件。组件不应该知道它是否在ScrollView中--它只是一个可怜的、无助的组件，到处乱丢。这就是为什么我把ScrollView放在预览代码中，而不是组件中。

我尝试过各种各样的组合，固定的尺寸，男人，杂志和理想。我所能找到的唯一工作就是这个hacky solution --这个问题的编辑部分在底部附近，几何读取器报告的宽度通过一个解决方案捕获到状态变量中，然后重新用于设置同级视图的帧大小。

注意，我是个完全的初学者。滚动视图和几何学读取器之间似乎有一些交互作用，这超出了我目前的理解。

似乎是一个confusing topic。

import SwiftUI

struct ScrollViewGeoReader: View {
    var body: some View {
        GeometryReader{ g in
            VStack{
                let width = g.size.width
                Circle().frame(width: width/3, height: width/3, alignment: .center)
                Text("inside geo")
                Text("inside geo")
                Text("inside geo \(width)")
                Text("inside geo")
                Text("inside geo")
            }
            .border(Color.green, width: 2)
        }
        .border(Color.red, width: 3)
    }
}

struct ScrollViewGeoReader_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
//            VStack {
            ScrollView {
                ScrollViewGeoReader()
                Text("Next scrollview item")
            }
            .border(Color.blue, width: 2)

        }
    }
}

ZStack (预期布局)：

​

​

ScrollView (查看几何图形的红色框架是如何折叠到大小为10的)：

​

​

编辑：

还请注意，同样的问题发生在圆圈之外，这也是我遇到的一个问题。因此，就宽度捕捉而言，它不是鸡/蛋，至少在圆圈方面是这样。虽然文本组件知道自己的大小，但我会告诉GR。

​

​

vs

​

​

Answer 1

这里有一些可能的布局解决方案(w/o子视图分离)。如果/当内部子视图分离时，可以通过构造函数参数注入几何宽度。

用Xcode 12测试。

​

​

struct TestScrollViewWithGeometry: View {
    var body: some View {
        GeometryReader{ g in
            ScrollView {
                VStack{
                    let width = g.size.width
                    Circle().frame(width: width/3, height: width/3, alignment: .center)
                    Text("inside geo")
                    Text("inside geo")
                    Text("inside geo \(width)")
                    Text("inside geo")
                    Text("inside geo")
                }
                .border(Color.green, width: 2)
                Text("Next scrollview item")
            }
            .border(Color.blue, width: 2)
        }
        .border(Color.red, width: 3)
    }
}