使用 SwiftUI 的一大收益就是可以像 Flutter 那樣對 App 進行熱更新，改動了UI的代碼，會直接反映在模擬器或者是真機中，大大提升了編寫用戶界面的效率，不用改1px，運行，各種點擊，然後查看效果的循環往復。但現在使用 SwiftUI 還為時過早，畢竟還是有大量 iOS 12 設備在運行，想要做大眾軟件，那還是要支持的。
那麼，有沒有辦法能讓 UIKit 編寫的軟件也能用上實時預覽呢？其實是可以的……畢竟，SwiftUI 也能直接顯示 UIKit 的控件。
首先我們來看看要在 Xcode中 裡預覽 SwiftUI，需要做哪些工作：
|
1 2 3 4 5 6 |
struct Login_Preview: PreviewProvider { static var previews: some View { } } |
你只需要在任意一個 .迅速 文件中加上上面的代碼，Xcode 就會為你顯示預覽界面了，要讓它加載 UIKit，我們需要實現一個 UIViewControllerRepresentable / UIViewRepresentable ，這取決於你要顯示的是 UIViewController 還是 的UIView 。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import SwiftUI struct ViewControllerPreview: UIViewControllerRepresentable { typealias UIViewControllerType = UIViewController let viewControllerBuilder: () -> UIViewControllerType init(_ viewControllerBuilder: @escaping () -> UIViewControllerType) { self.viewControllerBuilder = viewControllerBuilder } @available(iOS 13.0.0, *) func makeUIViewController(context: Context) -> UIViewController { viewControllerBuilder() } func updateUIViewController(_ uiViewController: UIViewController, context: Context) { // Do nothing } } struct ViewPreview: UIViewRepresentable { let viewBuilder: () -> UIViewType init(_ viewBuilder: @escaping () -> UIViewType) { self.viewBuilder = viewBuilder } func makeUIView(context: Context) -> UIView { viewBuilder() } func updateUIView(_ uiView: UIView, context: Context) { // Do nothing } typealias UIViewType = UIView } |
這兩個結構體是通用的，這樣以後就可以直接使用了。但這有一個問題，當我們真正編譯的時候，就需要修改最低支持版本號，因為畢竟它是依賴 SwiftUI 的，這就導致開發的時候需要調高版本號，在正式發布的時候再降低。
|
1 2 3 |
#if canImport(SwiftUI) && DEBUG // your code #endif |
我們可以用 Swift 宏來搞定這件事情，這樣，編譯器就可以自動判斷當前是否支持 SwiftUI，且在正式發布的時候，會自動去掉這些代碼了。
寫好了這兩個 可代表 之後，我們去需要預覽的文件中，啟用預覽：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#if canImport(SwiftUI) && DEBUG import SwiftUI @available(iOS 13.0, *) struct Login_Preview: PreviewProvider { static var previews: some View { ViewControllerPreview { UINavigationController(rootViewController: LoginPage()) } } } #endif |
這樣，Xcode 就能像使用 SwiftUI 那樣來預覽你的界面了！無論修改了什麼，都可以實時顯示在側面的預覽中！
注意，如果你使用了在每次編譯後自動提升版本號的腳本，那可能會導致預覽不能自動刷新，每次都要手動點 Resume，比如：
|
1 |
version=[crayon-6767a87f71844092914379 inline="true" ]/usr/libexec/PlistBuddy -c "Print CFBundleVersion" $PRODUCT_SETTINGS_PATH |
版本=
表達式 $版 + 1
/usr/libexec/PlistBuddy -c “組 :CFBundleVersion $版本” $PRODUCT_SETTINGS_PATH[/蠟筆]
我們需要修改它們以識別 實時預覽 模式：
|
1 2 3 4 |
if [ $ENABLE_PREVIEWS == "NO" ] then # your code to execute here version=[crayon-6767a87f71849377740874 inline="true" ]/usr/libexec/PlistBuddy -c "Print CFBundleVersion" $PRODUCT_SETTINGS_PATH |
版本=
表達式 $版 + 1
/usr/libexec/PlistBuddy -c “組 :CFBundleVersion $版本” $PRODUCT_SETTINGS_PATH
其他
迴聲 “由於預覽模式而跳過腳本”
菲
[/蠟筆]
這樣，腳本就只會在正常編譯時執行了，不會影響到 Xcode Live Preview。
參考文獻
本文由 落格博客 原創撰寫：落格博客 » 為 UIKit 開啟 Xcode Live Preview
轉載請保留出處和原文鏈接：https://www.logcg.com/archives/3502.html
