SwiftUI中的比例高度（或宽度）

Question

我开始探索SwiftUI，却找不到一种简单的方法：我希望View具有成比例的高度（基本上是其父代高度的百分比）。假设我有3个垂直堆叠的视图。我想要：

• 第一个达到其父母身高的43％
• 第二高为（其父母身高的）37％
• 最后一个高度（其父高的20％）

我从WWDC19观看了这个有趣的视频，它介绍了SwiftUI中的自定义视图（https://developer.apple.com/videos/play/wwdc2019/237/），并且我理解（如果我错了，请纠正我）基本上从不使用View本身具有大小，大小是其子代的大小。因此，父视图询问其子项的高度。他们的回答是：“身高减半！” 然后什么？布局系统（与我们以前使用的布局系统不同）如何处理这种情况？

如果您编写以下代码：

struct ContentView : View {
    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .fill(Color.red)
            Rectangle()
                .fill(Color.green)
            Rectangle()
                .fill(Color.yellow)
        }
    }
}

SwiftUI布局系统将每个视图的大小设置为1/3高，根据我上面发布的视频，这是正确的。您可以通过以下方式将矩形包装在框架中：

struct ContentView : View {
    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .fill(Color.red)
                .frame(height: 200)
            Rectangle()
                .fill(Color.green)
                .frame(height: 400)
            Rectangle()
                .fill(Color.yellow)
        }
    }
}

这样，布局系统将第一个矩形的尺寸设置为200高，第二个矩形的尺寸设置为400高，第三个矩形的尺寸适合所有剩余空间。再说一次，这很好。您不能（以这种方式）指定比例高度。

Answer 1

您可以利用GeometryReader。将读者包裹在所有其他视图周围，并使用其闭合值metrics来计算高度：

let propHeight = metrics.size.height * 0.43

如下使用它：

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { metrics in
            VStack(spacing: 0) {
                Color.red.frame(height: metrics.size.height * 0.43)
                Color.green.frame(height: metrics.size.height * 0.37)
                Color.yellow
            }
        }
    }
}

import PlaygroundSupport

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())