SwiftUI中的比例高度(或宽度) [英] Proportional height (or width) in SwiftUI

问题描述

我开始探索SwiftUI，但我找不到找到简单方法的方法:我希望View具有成比例的高度(基本上是其父代高度的百分比).假设我有3个垂直堆叠的视图.我想要:

I started exploring SwiftUI and I can't find a way to get a simple thing: I'd like a View to have proportional height (basically a percentage of its parent's height). Let's say I have 3 views vertically stacked. I want:

• 第一个高出其父母身高43％的人
• 第二高是其父母身高的37％
• 最后一个高出其父母身高的20％

我观看了来自WWDC19的这段有趣的视频，内容涉及SwiftUI中的自定义视图( https://developer.apple.com/videos/play/wwdc2019/237/)，并且我了解(如果我错了，请纠正我)基本上一个View本身就没有尺寸，该尺寸就是其尺寸孩子们.因此，父视图询问其子项的高度.他们的回答是:身高减半！"然后什么?布局系统(与我们以前使用的布局系统不同)如何处理这种情况?

I watched this interesting video from the WWDC19 about custom views in SwiftUI (https://developer.apple.com/videos/play/wwdc2019/237/) and I understood (correct me if I'm wrong) that basically a View never has a size per se, the size is the size of its children. So, the parent view asks its children how tall they are. They answer something like: "half your height!" and then... what? How does the layout system (that is different from the layout system we used to) manage this situation?

如果您编写以下代码:

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高，根据我上面在此处发布的视频，这是正确的. 您可以通过以下方式将矩形包裹在框架中:

The SwiftUI layout system sizes each view to be 1/3 high and this is right according to the video I posted here above. You can wrap the rectangles in a frame this way:

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高，第三个矩形的大小适合所有左侧空间.再说一次，这很好. 您不能(以这种方式)指定比例高度.

This way the layout system sizes the first rectangle to be 200 high, the second one to be 400 high and the third one to fit all the left space. And again, this is fine. What you can't do (this way) is specifying a proportional height.

推荐答案

您可以使用GeometryReader.将阅读器包裹在所有其他视图周围，并使用其闭合值metrics来计算高度:

You can make use of GeometryReader. Wrap the reader around all other views and use its closure value metrics to calculate the heights:

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())

这篇关于SwiftUI中的比例高度(或宽度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！