SwiftUI中PDFView出现多余阴影，如何消除该效果？

我通过PDFContext生成PDF预览数据，并用UIViewRepresentable封装了PDFKitView，将其嵌入列表单元格中使用。但PDFKitView边框周围始终存在多余阴影，即使设置了shadowOpacity、shadowRadius等layer属性为0也无法消除。所有父视图和PDF背景色均为白色，需要彻底去除阴影让边框不可见。

相关代码 #

生成PDF预览的代码

func createPDFPreview() -> Data? {
    
    var mediaBox = CGRect(x: 0, y: absoluteMin, width: width, height: effectiveHeight)
    let pdfData = NSMutableData()
    guard let pdfContext = CGContext(consumer: CGDataConsumer(data: pdfData as CFMutableData)!, mediaBox: &mediaBox,  nil) else {
        return nil
    }
    
    pdfContext.beginPDFPage(nil)
    
    pdfContext.setFillColor(.white)
    pdfContext.beginPath()
    pdfContext.addRect(mediaBox)
    pdfContext.fillPath()
    pdfContext.setFillColor(CGColor(gray: 0, alpha: 1))
    
    // some actual drawing

    pdfContext.endPDFPage()
    pdfContext.closePDF()
    
    return pdfData as Data
}

PDFKitView 封装代码

struct PDFKitView: UIViewRepresentable {
    let data: Data
    
    func makeUIView(context: Context) -> PDFView {
        let pdfView = PDFView()
        pdfView.document = PDFDocument(data: data)
        pdfView.autoScales = false
        pdfView.scaleFactor = 1.0
        pdfView.displayMode = .singlePageContinuous
        pdfView.displayDirection = .vertical
        pdfView.backgroundColor = .clear
        
        pdfView.layer.shadowOpacity = 0
        pdfView.layer.masksToBounds = true
        pdfView.layer.shadowRadius = 0
        pdfView.layer.shadowOffset = .zero
        
        pdfView.layer.backgroundColor = UIColor.clear.cgColor
        
        return pdfView
    }
    
    func updateUIView(_ uiView: PDFView, context: Context) {}
}

列表单元格使用代码

public struct TKExerciseListCell: View {
    
    let exercise: TKExercise

    public var body: some View {
        PDFKitView(data: exercise.pdfPreview!)
    }
}

解决方案 #

问题的核心是PDFView默认自带页面阴影效果，这个阴影不是layer层面的，而是PDFView自身的属性控制，所以调整layer阴影参数无效。按以下步骤修改：

1. 关闭PDFView自带的页面阴影
   在PDFKitView的makeUIView方法中添加一行代码，关闭内置的页面阴影：

pdfView.pageShadowsEnabled = false

2. 清理无效的layer阴影设置
   之前设置的layer阴影相关属性可以直接移除，因为它们对PDFView的内置阴影没有影响。

修改后的PDFKitView代码：

struct PDFKitView: UIViewRepresentable {
    let data: Data
    
    func makeUIView(context: Context) -> PDFView {
        let pdfView = PDFView()
        pdfView.document = PDFDocument(data: data)
        pdfView.autoScales = false
        pdfView.scaleFactor = 1.0
        pdfView.displayMode = .singlePageContinuous
        pdfView.displayDirection = .vertical
        pdfView.backgroundColor = .clear
        
        // 关键：关闭PDFView自带的页面阴影
        pdfView.pageShadowsEnabled = false
        
        return pdfView
    }
    
    func updateUIView(_ uiView: PDFView, context: Context) {}
}

3. 优化列表单元格样式（可选）
   如果仍有视觉上的边框/阴影错觉，可以调整列表单元格的背景和边距：

public struct TKExerciseListCell: View {
    
    let exercise: TKExercise

    public var body: some View {
        PDFKitView(data: exercise.pdfPreview!)
            .background(Color.white)
            .listRowBackground(Color.white)
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
    }
}

内容的提问来源于stack exchange，提问作者MassMover