ios - swiftui 3 View 栈布局，中间栈占空间

Question

我正在尝试使用 SwiftUI 来构建带有 VStack 的页眉/内容/页脚行的东西。我希望页眉和页脚各占屏幕高度的 10%，内容要扩展以填满其余部分。这种模式对于页眉/内容/页脚以外的东西可能很有用，所以如果已经有实现这种模式的东西(中间 View 扩展，或者类似的东西)，那就太好了......

这对于有经验的快速开发者来说可能 super 简单，但我似乎无法在任何地方找到它的例子。

任何建议/指针/代码将不胜感激!

我现有的 super 简单的代码，删除了我所有的实验:

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)

    }
}

结果应该是: