一尘不染

SwiftUI中的比例高度(或宽度)

swift

我开始探索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高,第三个矩形的尺寸适合所有剩余空间。再说一次,这很好。您不能(以这种方式)指定比例高度。


阅读 2007

收藏
2020-07-07

共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())
2020-07-07