如何使子視圖陰影從 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.
    }
}