Align some descendants to bottom, and some to top

Question

As a root view of my app, I have a ZStack, and I would like to add two floating bars, one to the bottom, and one to the top of the viewport.

With a single bar it's easy (ZStack(alignment: .top)), but is there a way to add multiple descendants, and have one aligned to the top, and a second one to the bottom?

I tried removing alignment from ZStack, and adding .frame(alignment: .top) / .frame(alignment: .bottom) to the children, but this didn't do anything.

Yes, it could be hacked around by wrapping a top-aligned ZStack with another, bottom-aligned one, but it seems rather inelegant.

Answer 1

Here is possible approach

ZStack {

 // content here

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

Other possible variant is to use one .overlay with VStack having two views and Spacer in between.

Answer 2

You can just add a VStack inside your ZStack like this

ZStack {
    VStack {
        YourTopView()
        Spacer()
        YourBottomView()
    }
}

Answer 3

Here's another approach that allows overlap of the top and bottom-aligned views.

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