如何在GeometryReader中使用LazyVGrid

Question

我正在用卡片构建一个网格，卡片顶部有一个图像视图，底部有一些文本。下面是组件的快速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)
    }
}

此组件输出以下布局：

​

​

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

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和Foreach中设置LazyVGrid和Foreach，根据SwiftUI布局规则，GeometryReader将得到建议的大小(可能仅为10分)。更重要的是，无论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)
        }
    }
}

我刚开始学斯威夫特一周。在我的理解中可能有一些错误。欢迎您帮忙改正。