swift - 如何在 LazyVGrid 中使用 GeometryReader

Question

我正在构建一个带有卡片的网格，顶部有一个 ImageView ，底部有一些文本。这是该组件的 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)
    }
}

该组件输出以下布局:

这看起来很棒，但我想在 Card 组件中添加一个 Geometry 读取器，以便根据封闭网格列的宽度缩放顶部 ImageView 。据我所知，该代码应如下所示:

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，我只是添加了它。如果我在顶层添加几何读取器，它将正确呈现网格，但这对我来说没有多大用处，因为我计划将组件抽象为其他符合 View 的结构。此外， GeometryReader 似乎在上下文中很有用，考虑到几何将来自顶层(全宽)，进行大量数学运算将宽度值减半然后从那里进行计算是没有意义的。
我是否错误地使用了几何阅读器？我的理解是它可以在组件树的任何地方使用，而不仅仅是在顶层。
谢谢参观!

Answer 1

我和你有同样的问题，但我已经解决了。这里有一些关键点。
如果您在 LazyVGrid 中设置 GeometryReader和 Foreach , 根据 SwiftUI 布局规则， GeometryReader 将获得建议的大小(可能只是 10 磅)。更重要的是，无论GeometryReader 里面是什么 subview ，它不会影响 GeometryReader 和 GeometryReader 的父 View 的大小。
因此，您的 View 显示为一条长长的黑色 strip 。您可以通过设置 GeometryReader { subView }.frame(some size) 来控制高度,
通常，我们需要两个 GeometryReader 来实现这一点。第一个可以获取大小并进行一些计算操作，然后传递给第二个。
(因为我的原代码有中文，可能你看不懂，所以只能给你一个简单的结构。)

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

我刚开始学习 swift 一个星期。我的理解可能有一些错误。欢迎您帮忙改正。