如何在 LazyVGrid 中使用 GeometryReader

Question

我正在构建一个带有卡片的网格，其顶部有图像视图，底部有一些文本。以下是该组件的 swift UI 代码：

struct Main: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: .init(repeating: .init(.flexible()), count: 2)) {
                ForEach(0..<6) { _ in
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color(UIColor.random))
                        VStack {
                            Rectangle()
                                .frame(minHeight: 72)
                            Text(ipsum)
                                .fixedSize(horizontal: false, vertical: true)
                                .padding()
                        }
                    }.clipShape(RoundedRectangle(cornerRadius: 10))
                }
            }.padding()
        }.frame(width: 400, height: 600)
    }
}

该组件输出以下布局：

这看起来很棒，但我想在卡片组件中添加一个几何读取器，以便根据封闭网格列的宽度缩放顶部图像视图。据我所知，该代码应该如下所示：

struct Main: View {
    var body: some View {
        ScrollView {
            LazyVGrid(columns: .init(repeating: .init(.flexible()), count: 2)) {
                ForEach(0..<6) { _ in
                    ZStack {
                        Rectangle()
                            .foregroundColor(Color(UIColor.random))
                        VStack {
                            GeometryReader { geometry in
                                Rectangle()
                                    .frame(minHeight: 72)
                                Text(ipsum)
                                    .fixedSize(horizontal: false, vertical: true)
                                    .padding()
                            }
                        }
                    }.clipShape(RoundedRectangle(cornerRadius: 10))
                }
            }.padding()
        }.frame(width: 400, height: 600)
    }
}

问题是这会呈现如下：

正如您所看到的，我什至没有尝试使用 GeometryReader，我只是添加了它。如果我在顶层添加几何读取器，它将正确渲染网格，但这对我来说没有多大用处，因为我计划将组件抽象为其他符合视图的结构。此外，GeometryReader 似乎在上下文中很有用，并且考虑到几何图形将来自顶层（全宽），进行大量数学运算将宽度值减半然后从那里进行计算是没有意义的。

我是否错误地使用了几何阅读器？我的理解是它可以在组件树中的任何地方使用，而不仅仅是在顶层。

谢谢参观！

Answer 1

我也遇到了和你一样的问题，不过我已经解决了。这是一些关键点。

LazyVGrid如果你在和中设置 GeometryReader Foreach，根据 SwiftUI 布局规则，GeometryReader 将获得建议的大小（可能只是 10 点）。更重要的是，无论GeometryReader内部有什么子视图，都不会影响GeometryReader和GeometryReader父视图的大小。

因此，您的视图显示为一条长黑色带。您可以通过设置来控制高度GeometryReader { subView }.frame(some size)，

一般来说，我们需要两个GeometryReader来实现这一点。第一个可以获取大小并执行一些计算操作，然后传递给第二个。

（由于我原来的代码有中文，可能你阅读起来比较困难，所以我只能给你一个简单的结构。）

GeometryReader { firstGeo in
    LazyVGrid(columns: rows) {
        ForEach(dataList) { data in
            GeometryReader { secondGeo in
              // subview
            }
            .frame(width: widthYouWantSubViewGet)
        }
    }
}

我刚开始学习swift一周。我的理解可能存在一些错误。欢迎您帮忙指正。