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.