如何在 SwiftUI 裡客製一個非同步載入圖片的 View

下載並呈現圖片是一個常見的項目，但是 SwiftUI 並沒有提供做法，那也沒關係。此篇教學說明如何客製一個 View 其可以非同步的載入圖片，其內容會透過 Combine 和 Property Wrapper 的觀念，將物件和物件之間環環相扣。

建立載入圖片的 ImageLoader

#1

遵從 Combine Framework 的 ObservableObject Protocol，此是為了能夠讓 ＠ObservedObject 這個 Property Wrapper 能夠監聽此物件。在此範例的目的是用來和 Image View 做綁定，並在當其封裝的屬性有所變化時，能夠通知監聽者。

#2

＠Published Property Wrapper 表示當此屬性有更動時，必須要通知觀察者。此範例的目的是要用來當圖片下載完成後，要通知用來呈現圖片的 Image View 必須要 Reload Body。

#3

在圖片下載完成並且沒有任何錯誤時，將圖片存放在 Property 裡。但因涉及 UI，所以必須在 Main Thread 處理，而會因 ＠Published 的特性通知 Image View 必須要重 Reload Body。

建立顯示圖片的 URLImageView

#1

＠ObservedObject Property Wrapper 用來觀察遵從 ObservableObject Protocol 物件裡宣告 ＠Published Property Wrapper 的屬性變化。此範例的目的是用來觀察圖片完成下載的狀態。

#2

在圖片下載完成前，顯示 Placeholder 的圖片，反之，則顯示已下載完成的圖片。

用法

結果

如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。若有任何問題也歡迎隨時提出。