How to apply shadow to interior views in SwiftUI?

user_1998220 0
Viewed 21608

I have added a shadow around the VStack that holds my two text fields and a submit button. However, the shadow is also being applied to the two text fields inside the VStack.

Is there something I am missing here that is causing this to happen? I tried adding shadow(radius: 0) on the text fields, but it doesn't change anything. If I remove the padding and background from the text fields, then the shadow goes away.

var body: some View {
    VStack() {
        Spacer()

        VStack() {
            TextField($email, placeholder: Text("email"))
                .padding()
                .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))

            SecureField($password, placeholder: Text("password"))
                .padding()
                .background(Color(red: 242 / 255, green: 242 / 255, blue: 242 / 255))

            Button(action: { self.login() }, label: { Text("Login").foregroundColor(Color.white) })
                .padding()
                .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))
        }
        .padding()
        .background(Color.white)
        .shadow(radius: 10)

        Spacer()
    }
    .padding()
    .background(Color(red: 0, green: 116 / 255, blue: 217 / 255))
    .edgesIgnoringSafeArea(.all)
}
swiftui swift
7 Answers

You can use clipped() here to fix this 

VStack() {
    Text("Text")
        .background(Color.red)
        .padding()
        .padding()

    Text("Text")
        .background(Color.purple)
        .padding()
}
.padding()
.background(Color.white)

.clipped()
.shadow(color: Color.red, radius: 10, x: 0, y: 0)

Output:

enter image description here

Hope it is helpful :)

user_46019000

For me it also worked to apply the shadow to the background instead of the Stack, e.g:

VStack {
  // ...
}.background(Rectangle().fill(Color.white).shadow(radius: 8))
user_13960680

There is a dedicated modifier for this - compositingGroup.

From documentation:

/// Wraps this view in a compositing group.
///
/// A compositing group makes compositing effects in this view's ancestor
/// views, such as opacity and the blend mode, take effect before this view
/// is rendered.
/// [...] 
/// This limits the scope of [...] change to the outermost view.

VStack {
    Text("Text")
        .background(Color.red)
        .padding()
        .padding()
    Text("Text")
        .background(Color.purple)
        .padding()
}
.padding()
.background(Color.white)
.compositingGroup()
.shadow(color: Color.red, radius: 10, x: 0, y: 0)
user_86977930

For the user's who are struggling to have this work for RoundedRectangle, use:

HStack {
 // Your nested views
}
.overlay(
  RoundedRectangle(cornerRadius: 10)
   .stroke(Color.black.opacity(0.2), lineWidth: 1)
)
.background(
   RoundedRectangle(
     cornerRadius: 10
   )
   .foregroundColor(Color.white)
   .shadow(
     color: Color.black,
     radius: 5,
     x: 0,
     y: 0
   )
)

The shadow is applied in the .background, RoundedRectagle element shadow.

While quite verbose, it's easy to read and the same principle can be applied to and from any other shape.

user_2846930

You can work around the issue by using a ZStack to put a Rectangle,Capsule,Circle or other shape behind the VStack. Then apply modifiers to the shape instead of the VStack itself. 

ZStack() {
    Capsule()
        .frame(width: 50, height: 50)
        .background(Color.white)
        .shadow(radius: 10)

    VStack() {
        //...
    }
}

Seems like a pretty annoying feature to me, there are many times when you would want a shadow on a container without it being applied to all its elements.

If anyone knows a better way please share, thanks!

user_96779420

Hello i'm using only this at the moment but it serves it's purpose - allows me to have inner shadow.

With some modification you can have what you want.

private struct InnerShadow: ViewModifier {

    func body(content: Content) -> some View {
        HStack(spacing: .zero) {
            verticalLine().offset(x: -1)
            VStack(spacing: .zero) {
                horizontalLine().offset(y: -1)
                content
                horizontalLine().offset(y: 1)
            }
            verticalLine().offset(x: 1)
        }

    }

    private func verticalLine() -> some View {
        Rectangle()
            .foregroundColor(.white)
            .frame(maxWidth: 1, maxHeight: .infinity)
            .shadow(radius: 4)

    }

    private func horizontalLine() -> some View {
        Rectangle()
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 1)
            .shadow(radius: 4)
    }

}
user_59305620

Using .clipped() (as some other answers suggest) can lead to some undesirable side-effects in some situations. Drawing an extra view using .background() and giving that a shadow is inefficient (in terms of compute) and tedious.

The best way to do this is to call .compositingGroup() on your VStack. That will look like this:

VStack {
    // Some inner views
}
.compositingGroup()

Per this page from the Apple Developer Documentation:

A compositing group makes compositing effects in this view’s ancestor views, such as opacity and the blend mode, take effect before this view is rendered.

Because the view and its children get composited as a single View, any shadows applied to it don't get propagated to the children.

user_82970520
Related