Search code examples
swiftuiswiftui-zstack

Align some descendants to bottom, and some to top

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.

Solution

  • 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.