Swiftui 如何将VStack拆分为两个子视图，其中第二个子视图的高度是第一个子视图的两倍

我刚开始使用SwiftUI，似乎VStack和HStack与web中的flex box非常相似。在web上，使用flex很容易将两个子视图拆分为高度-重量

<div id="parent" style="display: flex; flex-direction: column; height: 300px">
  <div id="subA" style="flex: 1; background-color: red">Subview A</div>
  <div id="subB" style="flex: 2; background-color: yellow">Subview B</div>
</div>

请帮助我如何实现这一点。

重要编辑#2

我不知道为什么我仍然收到反对票，但由于@kontiki的这一点，这里有一些简单的方法，而不是使用这个反对的方法：

声明：

@State private var rect: CGRect = CGRect()

然后创建以下内容：

struct GeometryGetter: View {
    @Binding var rect: CGRect

    var body: some View {
        GeometryReader { geometry in
            Group { () -> ShapeView<Rectangle, Color> in
                DispatchQueue.main.async {
                    self.rect = geometry.frame(in: .global)
                }
                return Rectangle().fill(Color.clear)
            }
        }
    }
}

重要编辑：

从beta 4开始，此方法已被弃用。

相对高度

、

相对宽度

、相对尺寸

都已弃用。改用

frame

。如果要基于

视图的父视图调整*relatve*大小，请改用GeometryReader`。（见附件。）

---

这是你想要的。请记住，没有修改器，一切都是居中的。而且，

relativeHeight

似乎（至少对某些人来说）不是很直观。关键是要记住，在

VSTack

中，父项占屏幕的50%，因此50%中的50%实际上是25%

或者，您可以指定帧的高度（让宽度占据整个屏幕）。但您的示例表明，无论实际屏幕大小如何，您都希望红色视图占整个屏幕的25%

struct RedView: View {
    var body: some View {
        ZStack {
            Color.red
            Text("Subview A")
        }
    }
}
struct YellowView: View {
    var body: some View {
        ZStack {
            Color.yellow
            Text("Subview B")
        }
    }
}
struct ContentView : View {
    var body: some View {
        VStack (spacing: 0) {
            RedView().background(Color.red).relativeHeight(0.50)
            YellowView()
        }
    }
}

---

那么你的意思是说用VStack作为子视图是不可能的吗？我不确定你的意思。我的

ContentView

是一个“VStack”。啊，没关系。当然，这是一个“基地”。没有理由

RedView

和

YellowView

不能包含

VStack

而不是纯

文本。在运行时，
SwiftUI将它们压缩到一个
View`。真正的问题是理解在哪里（以及以什么顺序）放置修改器。我的意思是你的
RedView
和
YellowView
基于ZStack，但有时我需要使用
VStack
作为子视图，其中包含多个文本和按钮。上面只包含一个
文本的示例
只是一个示例。我还尝试将
相对权重（0.50）
应用于
VStack
，但结果出乎意料，就像您提到的
50%
一样。这就是苹果仍需解决的问题吗？
struct ContentView : View {
    @State private var rect: CGRect = CGRect()
    var body: some View {
        VStack (spacing: 0) {
            RedView().background(Color.red)
                .frame(height: rect.height * 0.25)
            YellowView()
        }
        .background(GeometryGetter(rect: $rect))
    }
}

struct RedView: View {
    var body: some View {
        ZStack {
            Color.red
            Text("Subview A")
        }
    }
}
struct YellowView: View {
    var body: some View {
        ZStack {
            Color.yellow
            Text("Subview B")
        }
    }
}
struct ContentView : View {
    var body: some View {
        VStack (spacing: 0) {
            RedView().background(Color.red).relativeHeight(0.50)
            YellowView()
        }
    }
}