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

Question

我开始探索 SwiftUI，但找不到一种方法来获得简单的东西:我希望 View 具有成比例的高度(基本上是其父级高度的百分比)。假设我有 3 个垂直堆叠的 View 。我想要:

• 第一个高度为(其父级高度)43%
• 第二个高度为(其父级高度的)37%
• 最后一个高度为(其父级高度的)20%

我在 WWDC19 上观看了这段关于 SwiftUI 中自定义 View 的有趣视频 ( https://developer.apple.com/videos/play/wwdc2019/237/ )，我明白(如果我错了，请纠正我)基本上 View 本身没有大小，大小是它的 child 。因此，父 View 询问其 subview 他们有多高。他们的回答是这样的:“你高度的一半!”然后什么？布局系统(与我们习惯的布局系统不同)如何处理这种情况？

如果您编写以下代码:

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

SwiftUI 布局系统将每个 View 的大小调整为 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

更新

如果您的部署目标至少为 iOS 16、macOS 13、tvOS 16 或 watchOS 9，您可以编写自定义布局。例如:

import SwiftUI

struct MyLayout: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        return proposal.replacingUnspecifiedDimensions()
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        precondition(subviews.count == 3)

        var p = bounds.origin
        let h0 = bounds.size.height * 0.43
        subviews[0].place(
            at: p,
            proposal: .init(width: bounds.size.width, height: h0)
        )
        p.y += h0

        let h1 = bounds.size.height * 0.37
        subviews[1].place(
            at: p,
            proposal: .init(width: bounds.size.width, height: h1)
        )
        p.y += h1

        subviews[2].place(
            at: p,
            proposal: .init(
                width: bounds.size.width,
                height: bounds.size.height - h0 - h1
            )
        )
    }
}

import PlaygroundSupport
PlaygroundPage.current.setLiveView(MyLayout {
    Color.pink
    Color.indigo
    Color.mint
}.frame(width: 50, height: 100).padding())

结果:

尽管这比 GeometryReader 解决方案(如下)的代码更多，但它更容易调试并扩展到更复杂的布局。

原版

您可以使用GeometryReader。将阅读器包裹在所有其他 View 周围，并使用其闭合值 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())