我开始探索SwiftUI,但找不到一种简单的方法:我希望View具有成比例的高度(基本上是其父代高度的百分比)。假设我有3个垂直堆叠的视图。我想要:
我观看了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高,第三个矩形的尺寸适合所有剩余空间。再说一次,这很好。您不能(以这种方式)指定比例高度。
您可以利用GeometryReader。将阅读器包裹在所有其他视图周围,并使用其闭合值metrics计算高度:
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())