0

In SwiftUI I currently have a VStack of views, and I'd like to put an overlay over the bottom two views, like this:

VStack {
  Spacer()
  Group {
    centerView
    Spacer()
  }
  .overlay(overlayedView)
}

The goal of the above layout is ensure that centerView is vertically centered, while also ensuring that the overlayedView goes from the top of centerView all the way to the bottom of the VStack.

However, the above code actually results in one instance of overlayedView getting overlayed on top of centerView and another overlayedView getting overlayed on top of the bottom Spacer. But what I want is a single overlayedView spread on top of both centerView and the bottom Spacer.

How can I achieve my desired behavior?

wristbands
  • 1,021
  • 11
  • 22

1 Answers1

0

Using Group will add view modifiers to all the subviews of the group, resulting in 2 seperate overlays. To have one common overlay, you can use VStack instead of Group.

VStack {
  Spacer()
  VStack {
    centerView
    Spacer()
  }
  .overlay(overlayedView)
}
Manoj Gubba
  • 348
  • 3
  • 7
  • I've tried that approach, but unfortunately it doesn't work. Your approach leads to about 1/3 of space at the top and 2/3 at the bottom. The Spacers need to be in the same VStack in order to actually center the `centerView`. – wristbands Aug 29 '22 at 17:34