6

我正在用卡片构建一个网格，顶部有一个图像视图，底部有一些文本。这是该组件的 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 组件中添加一个几何阅读器，以便根据封闭网格列的宽度缩放顶部图像视图。据我所知，该代码应如下所示：

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 似乎在上下文中很有用，并且考虑到几何图形来自顶层（全宽），做一堆数学将宽度值减半然后从那里进行计算是没有意义的。

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

谢谢参观！

4

1 回答 1

0

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

如果你在里面设置 GeometryReader LazyVGrid，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 一个星期。我的理解可能有一些错误。欢迎您帮忙改正。

于 2021-03-08T14:23:17.843 回答