顶部和底部对齐Swiftui

Question

如何分别将页眉和页脚放置到视图的顶部和底部

我需要页眉和页脚保持在视图的顶部和底部，但我无法让它工作。

景色是这样的：

Scrollview {
    content
}

内容是：

error()
VStack(spacing: 0) {
moreViews()
}

错误是：

VStack(alignment: .center) {
header
   .frame(alignment: .top)
Spacer()
footer
   .frame(alignment: .bottom)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}

Answer 1

有几种方法可以实现这一目标：

1. 简单地将所有东西放入

   VStack

   中，稍后根据需要修改

   Header

   和

   Footer

   。

   ScrollView

   是贪婪的，它会压倒整个父级的框架，并且你将在视图的顶部和底部有一个页眉和一个页脚：

struct ContentView<Content>: View where Content: View {
    let content: () -> Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    var body: some View {
        VStack {
            VStack {
                Text("Header")
            }
            ScrollView {
                content()
            }
            VStack {
                Text("Footer")
            }
        }
    }
}

---

2. 使用

   toolBar

   。如果您使用的是 NavigationStack，您可以尝试

   .toolbar

   。一个缺点是它将取代当前的 TabBar 和 NavigationBar 外观：

var body: some View {
    content()
        .toolbar {
            ToolbarItemGroup(placement: .bottomBar) {
                Text("Footer")
            }
        }
        .toolbar {
            ToolbarItemGroup(placement: .principal) {
                Text("Header")
            }
        }
}

struct MyView: View {
    var body: some View {
        NavigationStack {
            ContentView {
                Text("Content here")
            }
        }
    }
}

Answer 2

A

Spacer

不能在

ScrollView

内工作，最大尺寸

.infinity

也不能工作，除非您在内容周围设置了边框。这是因为，

ScrollView

内的内容采用其理想大小，就像应用了

.fixedSize

一样。

要修复，请尝试用

ScrollView

包裹

GeometryReader

并将内容的最小高度设置为

ScrollView

的高度：

GeometryReader { proxy in
    ScrollView {
        content
            .frame(minHeight: proxy.size.height)
    }
}