基于 SwiftUI 中该视图内的 GeometryReader 设置视图框架

Question

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

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

这是我在一些绊脚石后想出的初步解决方案：

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

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

正如您很容易发现的那样，ScrollView 中的 GeometryReader 假定父级提供的大小，有效地隐藏了大部分 View。

这种情况有几种“肮脏”的解决方案：为 View 设置一个固定的框架高度，设置一个接近正确大小的纵横比（考虑到有固定高度的 Text 视图，这有点棘手），保持 GeometryReader 作为最外层主视图的元素并将宽度作为初始化参数传递给子视图。

我正在为这个特定的布局寻找一个“干净”的解决方案，也许是为了更全面地了解 Views 是如何 SwiftUI 调节它们的大小的——在 WWDC 视频中，据说父 View 提出了一个大小，但随后子 View 返回了它自己的尺寸；有没有办法以某种方式干预该过程，还是全部通过私有 API 完成？

谢谢！

–巴格兰

ps 我认为除了 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不知道它有多少空间。因此，您必须通过变量提供此信息。结果是：