Using QuickLook in SwiftUI
SwiftUI is growing with every release, but there are still old treasures to be found in various frameworks, that aren’t part of core SwiftUI. Let’s take a quick look at QuickLook!
I didn’t know about SwiftUI’s support for QuickLook, and stumbled upon it by chance. You can use it to preview any previewable URL content, such as PDFs, images etc.
To use QuickLook with SwiftUI, you must first import the QuickLook framework. You can then apply the .quickLookPreview view modifier and bind it to a URL.
Consider that we have a multi-platform SwiftUI app for iOS & macOS, that has an bundle image called meadow.jpg. This is how easy it is to enable quick look preview:
import SwiftUI
import QuickLook
struct ContentView: View {
@State
var url: URL?
var body: some View {
Button("Preview") {
url = Bundle.main.url(forResource: "meadow", withExtension: "jpg")
}
.quickLookPreview($url)
}
}
Setting the url property will make the .quickLookPreview modifier present the content at the provided url in a preview, in a way that suits the platform.
In iOS, the button presents the image in a full screen cover:
If we run the same app on macOS, tapping the button presents the image in a nice modal:
QuickLook is only available in iOS & macOS, not tvOS & watchOS. You can use #if os(iOS) and #if os(macOS) to conditionally enable it in multi-platform apps and SDKs.
Discussions & More
If you found this interesting and would like to share your thoughts, please comment in the Disqus section below or reply to this tweet.
Follow on Twitter and Mastodon to be notified when new content & articles are published.