如何限制 VStack 内 GeometryReader 的大小

Question

我想阻止 GeometryReader 干扰我在 VStack 中的布局，但我不确定正确的方法是什么。

以带有标题和说明的简单图表为例：

struct Graph: View {
  var body: some View {
    HStack(spacing: 0) {
      Color.red.frame(width: 100, height: 80)
      Color.blue.frame(width: 100, height: 120)
      Color.green.frame(width: 100, height: 180)
    }
  }
}

struct GraphExample: View {
  var body: some View {
    VStack {

      Text("My graph")

      // Graph represents a custom view with a natural and non-static height
      Graph()

      Text("My graph caption")
    }
  }
}

产生这个预期的结果：

但是，如果我们更新 Graph 视图以使用 GeometryReader 将图形均匀地分割到屏幕宽度上，则布局会发生变化。

struct Graph: View {
  var body: some View {
    GeometryReader { proxy in
      HStack(spacing: 0) {
        Color.red.frame(width: proxy.size.width / 3, height: 80)
        Color.blue.frame(width: proxy.size.width / 3, height: 120)
        Color.green.frame(width: proxy.size.width / 3, height: 180)
      }
    }
  }
}

这会使Graph 视图填满VStack 中的所有可用空间

有没有办法让Graph 视图仅填充其自然高度，并且在仍使用GeometryReader 时不消耗所有可用高度。

请记住，Graph 可以是此处确切大小未知的任何视图，因此无法设置静态大小。即没有GeometryReader，Graph 只能占用 VStack 中所需的垂直空间量。

Answer 1

这是可能的解决方案。使用 Xcode 11.4 / iOS 13.4 测试

struct Graph: View {
  @State private var width = UIScreen.main.bounds.width // just initial constant
  var body: some View {
      HStack(spacing: 0) {
        Color.red.frame(width: width / 3, height: 80)
        Color.blue.frame(width: width / 3, height: 120)
        Color.green.frame(width: width / 3, height: 180)
      }.background(GeometryReader { gp -> Color in
        let frame = gp.frame(in: .local)
        DispatchQueue.main.async {
            self.width = frame.size.width // << dynamic, on layout !!
        }
        return Color.clear
      })
  }
}