QLPreviewController在SwiftUI中缺少导航栏

Question

当我以表格形式显示时，QLPreviewController导航栏消失了。

它看起来像这样：

如何显示顶部导航栏或navigationItem？

快速查看控制器 UIKit 可用于 SwiftUI 中

.sheet(isPresented: $showQuickLook, onDismiss: {self.showQuickLook = false}) {
                        if  self.selectedURL != nil {
                            QuickLookController(url: self.selectedURL!) {
                                self.showQuickLook = false
                            }.edgesIgnoringSafeArea(.all)
                        }
                    }


struct QuickLookController: UIViewControllerRepresentable {

    var url: URL
    var onDismiss: () -> Void

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func updateUIViewController(_ uiViewController: QLPreviewController, context: UIViewControllerRepresentableContext<QuickLookController>) {
        uiViewController.reloadData()
    }

    func makeUIViewController(context: Context) -> QLPreviewController {
        let controller = QLPreviewController()

        controller.dataSource = context.coordinator
        controller.reloadData()
        return controller
    }

    class Coordinator: NSObject, QLPreviewControllerDataSource {
        var parent: QuickLookController

        init(_ qlPreviewController: QuickLookController) {
            self.parent = qlPreviewController
            super.init()
        }
        func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
            return 1
        }
        func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
            return self.parent.url as QLPreviewItem
        }

    }
}

- Hüseyin

Answer 1

QuickLook预览没有自己的导航控制器，我们需要提供一个。

以下是可能的方法。已在Xcode 11.4 / iOS 13.4上进行测试。

struct TestQLPreviewController: View {
    @State private var showQuickLook = false

    // just for demo - document.pdf is located in main bundle
    @State private var selectedURL = Bundle.main.url(forResource: "document", withExtension: "pdf")
    var body: some View {
        Button("Show") { self.showQuickLook.toggle() }
            .sheet(isPresented: $showQuickLook, onDismiss: {self.showQuickLook = false}) {
                                    if  self.selectedURL != nil {
                                        QuickLookController(url: self.selectedURL!) {
                                            self.showQuickLook = false
                                        }
                                    }
                                }
    }
}


struct QuickLookController: UIViewControllerRepresentable {

    var url: URL
    var onDismiss: () -> Void

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func updateUIViewController(_ viewController: UINavigationController, context: UIViewControllerRepresentableContext<QuickLookController>) {
        if let controller = viewController.topViewController as? QLPreviewController {
            controller.reloadData()
        }
    }

    func makeUIViewController(context: Context) -> UINavigationController {
        let controller = QLPreviewController()

        controller.dataSource = context.coordinator
        controller.reloadData()
        return UINavigationController(rootViewController: controller)
    }

    class Coordinator: NSObject, QLPreviewControllerDataSource {
        var parent: QuickLookController

        init(_ qlPreviewController: QuickLookController) {
            self.parent = qlPreviewController
            super.init()
        }
        func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
            return 1
        }
        func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
            return self.parent.url as QLPreviewItem
        }

    }
}

- Asperi

Answer 2

这里是一个可以处理多个URL的实现：

import SwiftUI
import QuickLook

struct QuickLookView: UIViewControllerRepresentable {

    var urls: [URL]

    func updateUIViewController(_ uiViewController: QLPreviewController,
                                context: UIViewControllerRepresentableContext<QuickLookView>) {
        uiViewController.reloadData()
    }

    func makeUIViewController(context: Context) -> QLPreviewController {
        let controller = QLPreviewController()
        controller.dataSource = context.coordinator
        controller.reloadData()
        return controller
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, QLPreviewControllerDataSource {
        var parent: QuickLookView

        init(_ qlPreviewController: QuickLookView) {
            self.parent = qlPreviewController
            super.init()
        }
        func numberOfPreviewItems(in controller: QLPreviewController) -> Int {
            return parent.urls.count
        }
        func previewController(_ controller: QLPreviewController, previewItemAt index: Int) -> QLPreviewItem {
            return parent.urls[index] as QLPreviewItem
        }
    }
}

然后将QuickLookView包装在容器中，并从您的视图中访问它：

struct QuickLookContainerView: View {

    let urls: [URL]

    var body: some View {
        NavigationView {
            QuickLookView(urls: urls)
        }
    }
}

- Nico S.