如何在 LazyVGrid 中使用 GeometryReader答案

【问题标题】：How to use GeometryReader within a LazyVGrid如何在 LazyVGrid 中使用 GeometryReader
【发布时间】：2020-07-11 19:29:37
【问题描述】：

我正在构建一个带有卡片的网格，上面有一个图像视图，底部有一些文本。这是组件的 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，我只是添加了它。如果我在顶层添加几何阅读器，它将正确渲染网格，但这对我来说没有多大用处，因为我计划将组件抽象为其他符合 View 的结构。此外，GeometryReader 似乎在上下文中很有用，并且考虑到几何图形来自顶层（全宽），做一堆数学将宽度值减半然后从那里进行计算是没有意义的。

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

感谢观看！

【问题讨论】：

游乐场链接gist.github.com/thexande/98ccc93ef169d230fa14737114f88f8e
可以，但效果可能不同，所以您能以某种方式展示您尝试实现的目标吗？还有很多其他方法。
@thexande 我正在努力解决一个相同的问题——尽管网格视图被抽象为子视图。您是否设法解决了这个问题，或者解决了这个问题？
我最终只是硬编码了帧大小。

标签： swift swiftui lazyvgrid

【解决方案1】：

我和你有同样的问题，但我已经解决了。这里有一些关键点。

如果在LazyVGrid 和Foreach 中设置GeometryReader，根据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 一个星期。我的理解可能有一些错误。欢迎大家帮忙改正。

【讨论】：