ios - 根据 SwiftUI 中该 View 内部的 GeometryReader 设置 View 框架

Question

作为学习新技术的一部分，我正在尝试在 SwiftUI 中实现我正在开发的应用程序的一个屏幕。我有这个粗略的布局:

此元素应拉伸(stretch)以适应容器大小(不同宽度的设备)，并将在 ScrollView 中使用。

这是我经过一番摸索后想出的初步解决方案:

这对于第一次尝试来说效果很好，但我想通过将所有相关部分移动到单独的 View 中来重构 View 。除此之外，我希望新 View 能够自动考虑填充和我稍后可能添加的其他尺寸修改。

所以，这是一个天真的重写:

正如您所看到的，ScrollView 中的 GeometryReader 假定了父级提供的大小，从而有效地隐藏了大部分 View。

对于这种情况，有几种“肮脏”的解决方案:为 View 设置固定的框架高度，设置近似正确尺寸的宽高比(考虑到有固定高度的 TextView ，这有点棘手)，保留 GeometryReader作为主视图的最外层元素，并将宽度作为初始化参数传递给 subview 。

我正在为这个特定的布局寻找一个“干净”的解决方案，也许是为了更全面地了解 SwiftUI 的 View 如何调节它们的大小 - 在 WWDC 视频中据说父 View 提出了一个大小，然后子 View 提出了一个大小View 返回它自己的大小；有没有办法以某种方式干扰该过程，或者这一切都是通过私有(private) API 完成的？

谢谢!

——巴格兰

附:我认为除了 UI 预览之外的代码屏幕截图最具说明性，但请告诉我是否应该提供代码片段!

Answer 1

这段代码工作正常:

struct GeometryReaderExperiment: View {
    var body: some View {

        GeometryReader { geometry in

            ScrollView {

                Text("First")

                DesignedFancy(parentGeometry: geometry, rectangleColor: .red)

                Text("Second")

                DesignedFancy(parentGeometry: geometry, rectangleColor: .green)

                Text("Third")

                DesignedFancy(parentGeometry: geometry, rectangleColor: .blue)

            }

        }

    }
}

struct DesignedFancy: View {

    var parentGeometry: GeometryProxy
    var rectangleColor: Color

    var body: some View {

        HStack(alignment: .bottom) {
            VStack {
                Rectangle()
                    .aspectRatio(1, contentMode: .fit)
                    .foregroundColor(rectangleColor)

                Text("One")
            }
            .frame(width: parentGeometry.size.width * 2/3)

            VStack {
                Rectangle()
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(rectangleColor)
                Text("Two")
            }

        }

    }

}

我认为问题是 DesignedFancy 不知道它有多少空间。因此，您必须通过变量提供此信息。结果是: