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

问题描述

我开始探索 SwiftUI，但找不到简单的方法:我希望视图具有成比例的高度(基本上是其父级高度的百分比).假设我有 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/)，我明白(如果我错了，请纠正我)基本上一个视图本身从来没有大小，大小就是它的大小孩子们.所以，父视图会询问它的孩子他们有多高.他们的回答是:身高的一半！"然后什么?布局系统(与我们习惯的布局系统不同)如何处理这种情况?

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 are 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屋！