You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI+PDFKit开发PDF阅读器如何修改PDF视图背景色或背景图

结论

PDFKit的PDFView完全支持替换默认外围背景为自定义纯色或图片,你当前方案不生效是因为PDFView自带不透明的原生背景层,遮挡了ZStack底部放置的自定义背景内容。

核心修改逻辑

要让自定义背景正常显示,需要先清除PDFView及其内部嵌套子视图的默认不透明背景:

  • 清除PDFView自身的背景色
  • 清除PDFView内部承载内容的UIScrollView背景色
  • 清除PDF页面之外的滚动区域默认背景
    清除完成后,放在PDFView下层的自定义颜色/图片就会正常透出,也可以直接将自定义背景插入PDFView的视图层级底层。
具体实现代码

直接替换原有实现即可,同时支持纯色、图片两种自定义背景效果:

import SwiftUI
import PDFKit

struct MapPDFView: View {
    var url: URL
    
    var body: some View {
        ZStack {
            // 自定义背景图,清除PDFView默认背景后即可正常显示
            Image("Transparant")
                .resizable()
                .ignoresSafeArea()
            // 若需要纯色背景,替换上面的Image为下行代码即可
            // Color(red: 0.95, green: 0.95, blue: 0.97).ignoresSafeArea()
            MapPDFView1(url)
        }
    }
}

struct MapPDFView1: UIViewRepresentable {
    let url: URL
    init(_ url: URL) {
        self.url = url
    }

    func makeUIView(context: Context) -> PDFView {
        let pdfView = PDFView()
        pdfView.document = PDFDocument(url: self.url)
        pdfView.autoScales = true
        
        // 核心配置:清除所有默认背景层
        pdfView.backgroundColor = .clear
        // 找到内部承载PDF内容的滚动视图,清除其默认背景
        if let scrollView = pdfView.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView {
            scrollView.backgroundColor = .clear
            // 清除滚动视图子视图的默认背景,避免残留灰/黑色块
            for subview in scrollView.subviews {
                subview.backgroundColor = .clear
            }
        }
        
        return pdfView
    }

    func updateUIView(_ uiView: PDFView, context: Context) {
        // 需要动态切换背景/适配主题时可在此补充逻辑
    }
}

struct MapPDFView_Previews: PreviewProvider {
    static var previews: some View {
        MapPDFView(url: Bundle.main.url(forResource: "Map", withExtension: "pdf")!)
    }
}
可选优化
  • 若需要适配深色/浅色模式自动切换背景,通过@Environment(\.colorScheme)获取当前系统主题,动态返回对应颜色/图片即可,无需改动PDFView相关配置。
  • 若不想把背景放在ZStack外层,也可以在makeUIView方法中初始化自定义的UIImageView/UIView作为背景,调用pdfView.insertSubview(自定义背景视图, at: 0)插入到PDFView视图层级最底层,约束设置为和pdfView等大即可,显示效果完全一致。

内容的提问来源于stack exchange,提问作者Curiousnoes

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 00:15:51