ios - swiftui 三视图栈布局，中间栈占用空间

Question

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

对于经验丰富的快速开发人员来说，这可能非常简单，但我似乎无法在任何地方找到它的示例。

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

我现有的超级简单代码，删除了我的所有实验：

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)
    }
}

标签： iosswiftswiftui

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)

    }
}

结果应该是：