ios - 如何在 SwiftUI 中使子视图阴影从父视图中溢出？

Question

正如标题所解释的，我需要使子视图的阴影从父边界溢出。

我们可以看到阴影被容器（父视图）裁剪。如何忽略它？

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)

// DownloadOptionView 的视图结构，已修改，可能无法编译

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)
        }
    }
}

Answer 1

我对您的创建方式做了一些猜测，DownloadOptionView但答案可以在您的上下文中使用，因为它是一种通用技术。

在您创建DownloadOptionView的地方，您需要添加.blendMode(.overlay)修饰符：

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.
    }
}