SwiftUI中的比例高度（或寬度）

Question

我開始探索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高，第三個矩形的尺寸適合所有剩余空間。 再說一次，這很好。 您不能（以這種方式）指定比例高度。

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