how to make subview shadow bleeding out from parent view in SwiftUI?

Question

As the title explained, I need make the shadow of subview bleeding out from parent bounds.

We can see the shadow is clipped by the container (parent view). How to ignore it?

ScrollView(axis, showsIndicators: false) {
    HStack{

        ForEach(d_keys.indices) { index -> DownloadOptionView in

            let d_key = d_keys[index]
            let d_info = asset.downloads[d_key]!
            
            return DownloadOptionView(d_key: d_key, d_info: d_info)
        }.padding(.vertical, 10) // ForEach
    }
}.frame(minHeight:130)

// View structure for DownloadOptionView, modified, may not compile

struct DownloadOptionView: View {
    let d_key: String
    let d_info: DownloadInfo

    // some @ObservedObject ...........
    // some @State ...........
    
    var body: some View {
        
        return NavigationLink(destination: SceneKitCanvas(textureMap: textureMap), isActive: self.$present) {
            
        Button(action: {
            
            // Download / storage / animation      
        }) {
            ZStack{
                LinearGradient(gradient: Gradient(colors: [Neumorphism.background, Neumorphism.light]),
                               startPoint: .topLeading, endPoint: .bottomTrailing)
                
                Color.green.scaleEffect(x: 1.0, y: CGFloat(scale), anchor: .bottom) // progress bar
                Color.green.scaleEffect(x: 1.0, y: CGFloat(increased), anchor: lineAnchor)
                
                VStack(alignment: .leading, spacing: 5) {
                    HStack(alignment: .center) {
                        Image(systemName: imageName).aspectRatio(contentMode: .fit)
                        Text(file_type).fontWeight(.light)
                    }.padding(.bottom, 5)
                    Text(d_key).font(.footnote).fontWeight(.light)
                    Text(size_final).font(.footnote).fontWeight(.light)
                    
                }.padding() // VStack
            } // ZStack
        }
        .cornerRadius(20)
        .shadow(color: Color.gray, radius: 3, x: 3, y: 3)
        .shadow(color: Color.white, radius: 3, x: -3, y: -3)
        }
    }
}

Thanks, it's quite long code. Basically, some ZStack VStack inside Button, then Button is wrapped in NavigationLink. Shadow is applied on Button. — iaomw, Jul 11 '20 at 23:23

score 0 · Answer 1 · answered Jul 11 '20 at 17:08

0

I have done some guesswork about how you created DownloadOptionView but the answer can be used in your context as it's a general technique.

Where you are creating DownloadOptionView you need to add the .blendMode(.overlay) modifier:

struct DownloadOptionView: Shape {
    func path(in rect: CGRect) -> Path {
        return RoundedRectangle(cornerRadius: 8, style: .continuous).path(in: rect)
    }

    var body: some View {
        RoundedRectangle(cornerSize: CGSize(width: 8, height: 8))
        .frame(minWidth: 200, minHeight: 200)
        .shadow(radius: 10)
        .blendMode(.overlay) //Add here.
    }
}

answered Jul 11 '20 at 17:08

Pranav Kasetti

8,770
2
50
71

Hi, I applied the `.blendMode(.overlay)` at several different place, `Button` `HStack` `ScrollView` But it seems not working. – iaomw Jul 11 '20 at 23:32
It needs to be on the view which has the shadow modifier. – Pranav Kasetti Jul 11 '20 at 23:33
Not on any other views. – Pranav Kasetti Jul 11 '20 at 23:51
I tried it before and after `.shadow(*******)`, didn't work. – iaomw Jul 11 '20 at 23:58
can you share your `DownloadOptionView` code? i’m not sure what is the issue as it works in my case and should work for simple view layouts. – Pranav Kasetti Jul 11 '20 at 23:59
Hey, I posted it in the description. – iaomw Jul 12 '20 at 01:35
any solution ever come of this? having the same issue. – Case Silva May 11 '23 at 14:11

how to make subview shadow bleeding out from parent view in SwiftUI?

1 Answers1