SwiftUI: Shadow on view in VStack? - swiftui

Question

I have the following code:
struct ViewA: View {
var body: some View {
Rectangle()
.fill(Color(.yellow))
}
}
struct ViewB: View {
var body: some View {
Rectangle()
.fill(Color(.white))
}
}
struct ViewC: View {
var body: some View {
Rectangle()
.fill(Color(.blue))
}
}
struct TestView: View {
var body: some View {
GeometryReader { geo in
VStack(spacing: 0) {
ViewA()
.frame(width: geo.size.width, height: geo.size.width/4, alignment: .center)
.shadow(color: .black, radius: 10, x: 0, y: 10)
ViewB()
ViewC()
.frame(width: geo.size.width, height: 100, alignment: .center)
.shadow(color: .black, radius: 10, x: 0, y: 0)
.opacity(0.8)
}
}
}
}
It draws:
The shadow at the bottom Blue over White view (ViewC over ViewB) shows up.
I want the yellow view (ViewA) to drop a shadow on top of the white view.
I want the white view to appear as if it were under both the top view (yellow) and the bottom view (blue).
I am not sure how to organize the views so that the top view also drops shadow on the middle view.
How would I accomplish this?

Answer 1

You could apply zindex modifier to ViewA. For example .zIndex(.infinity). It will put ViewA on top of everything.
https://developer.apple.com/documentation/swiftui/view/zindex(_:)

Answer 2

If you place the views in a ZStack with ViewB behind ViewA and ViewC you will see the shadow:
GeometryReader { geo in
ZStack {
ViewB()
VStack(spacing: 0) {
ViewA()
.frame(
width: geo.size.width,
height: geo.size.width/4,
alignment: .center)
.shadow(
color: .black,
radius: 10,
x: 0, y: 0)
Spacer()
ViewC()
.frame(
width: geo.size.width,
height: 100,
alignment: .center)
.shadow(
color: .black,
radius: 10,
x: 0, y: 0)
.opacity(0.8)
}
}
}