Question

我正在尝试实现这样的布局：

对于这个简单的示例，基数将如下所示：

HStack {
  VStack {
    Text("Foo")
    Text("W")
    Text("X")
  }
  VStack {
    Text("Bar")
    Text("Y")
    Text("Z")
  }
}

现在不建议使用relativeSize(...)，我看到的唯一剩下的选项是GeometryReader，但是问题在于，一旦它自己嵌套在另一个堆栈中，它将尝试填充所有可用空间，换句话说，它无法确定如果不包含它的堆栈的大小，那么我最终会得到一个过大的堆栈。

我想知道我是否缺少某些东西，或者这仅仅是堆栈的工作方式，还是beta错误？

谢谢您的帮助

编辑：我是这样做的：

VStack {
GeometryReader { /* @kontiki code */ }
Text("Other")
Spacer().layoutPriority(1)
}

但是不幸的是，这是我得到的结果，您认为这是一个SwiftUI错误吗？

Answer 1

此示例将绘制3列，其宽度为父级宽度的0.7、0.15和0.15。这是您可以微调的起点。请注意，有边框，您可以看到自己在做什么，当然也可以删除它们。

如果GeometryReader扩展过多，请准确解释您要完成的工作，在表格周围提供更多上下文（即GeometryReader）。

struct ContentView : View {
    var body: some View {

        GeometryReader { proxy in
            HStack(spacing: 0) {
                VStack {
                    Text("Foo")
                    Text("Bar")
                }.frame(width: proxy.size.width * 0.7, alignment: .leading).fixedSize().border(Color.red)

                VStack {
                    Text("W")
                    Text("Y")
                }.frame(width: proxy.size.width * 0.15).fixedSize().border(Color.red)

                VStack {
                    Text("X")
                    Text("Z")
                }.frame(width: proxy.size.width * 0.15).fixedSize().border(Color.red)
            }
        }.padding(20)
    }
}

如何使用GeometryReader来实现类似布局的表格？

1 个答案: