swiftui 3 視圖堆棧布局，中間堆棧占用空間

Question

我正在嘗試使用 SwiftUI 來構建帶有VStack的頁眉/內容/頁腳的VStack 。 我希望頁眉和頁腳各占屏幕高度的 10%，而內容要擴展以填充其余部分。 這種模式可能對頁眉/內容/頁腳以外的東西有用，所以如果已經有東西實現了這種模式（中間視圖擴展，或者沿着這些線的東西），那就太好了......

對於經驗豐富的 swift 開發人員來說，這可能非常簡單，但我似乎無法在任何地方找到它的示例。

任何建議/指針/代碼將不勝感激！

我現有的超級簡單代碼，刪除了我的所有實驗：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack() {
            Header()
            Content()
            Footer()
        }
        .frame(minWidth: 0,
               maxWidth: .infinity,
               minHeight: 0,
               maxHeight: .infinity,
               alignment: Alignment.topLeading)
        .border(Color.red)

    }
}

struct Header: View {
    var body: some View {
        HStack() {
            Text("Header")
        }
        .padding()
        .border(Color.blue)
    }
}

struct Content: View {
    var body: some View {
        HStack() {
            Text("Content")
        }
        .padding()
        .border(Color.black)
    }
}

struct Footer: View {
    var body: some View {
        HStack() {
            Text("Footer")
        }
        .padding()
        .border(Color.green)
    }
}

Answer 1

我認為您可以在您的情況下使用GeometryReader ：

struct HeaderContentFooter: View {

    var body: some View {

        GeometryReader { geometry in

            VStack(spacing: 0) {
                Rectangle() // header
                    .foregroundColor(.red)
                    .frame(height: geometry.size.height / 10)

                Rectangle() // content, which fill up everything with VStack

                Rectangle() // footer
                    .foregroundColor(.red)
                    .frame(height: geometry.size.height / 10)
            }

        }
        .edgesIgnoringSafeArea(.all)

    }
}

結果應該是：