I created an example project to show my view layout using colors. Here's what it looks like:
And here's the code to produce it:
struct ContentView: View {
@State private var isShowingLeftPopup: Bool = false
@State private var isShowingRightPopup: Bool = false
var body: some View {
TabView {
VStack {
Spacer()
ZStack {
Color.red
.frame(height: 200)
HStack(spacing: 15) {
Color.accentColor
.disabled(self.isShowingRightPopup)
.onTapGesture {
self.isShowingLeftPopup.toggle()
}
Color.accentColor
.disabled(self.isShowingLeftPopup)
.onTapGesture {
self.isShowingRightPopup.toggle()
}
}
.frame(height: 70)
.padding(.horizontal)
}
Color.purple
.frame(height: 300)
}
}
}
}
When either of the two blue rectangles are tapped, I want to animate a view onto the screen directly below the blue rectangles, filling the vertical space between the blue rectangles and the tab bar at the bottom. The animation isn't really that important at the moment - what I can't figure out is how to anchor a conditional view to the bottom of the blue rectangles and size it to fit the remaining space below.
I put together a mockup of what it should look like when the left blue rectangle is tapped:
I'm using fixed heights in this example, but I'm looking for a solution that doesn't rely on fixed values. Does anyone know how you would anchor the green rectangle to the bottom of the blue rectangles and dynamically size it to fill the vertical space all the way to the tab bar?