将一些后代对齐到底部，一些后代对齐到顶部

Question

作为我的应用程序的根视图，我有一个ZStack，我想添加两个浮动栏，一个位于视口的底部，一个位于视口的顶部。

使用单个栏很容易（ZStack(alignment: .top)），但是有没有一种方法可以添加多个后代，并使一个与顶部对齐，另一个与底部对齐？

我尝试alignment从 ZStack 中删除，并将.frame(alignment: .top)/添加.frame(alignment: .bottom)到子级中，但这没有任何作用。

是的，可以通过将顶部对齐的 ZStack 与另一个底部对齐的 ZStack 包装起来来破解，但这看起来相当不优雅。

Answer 1

这是可能的方法

ZStack {

 // content here

}
.overlay(YourTopView(), alignment: .top)
.overlay(YourBottomView(), alignment: .bottom)

另一种可能的变体是使用.overlay具有VStack两个视图和Spacer介于两者之间的视图。

Answer 2

这是另一种允许顶部和底部对齐视图重叠的方法。

ZStack() {
    VStack() {
        topView()
        Spacer()
    }
    VStack() {
        Spacer()
        bottomView()
    }
}