詳解iOS14 Widget 開發相關及易報錯地方處理
首先了解下如何建立
Xcode -> File -> New -> Target 找到 Widget Extension
如果你的 Widget 支援使用者配置屬性,則需要勾選這個(例如天氣元件,使用者可以選擇城市),不支援的話則不用勾選
瞭解下建立Widget後,系統給我們生成的檔案內容
下面這個程式碼是沒有勾選 Include Configuration Intent 的地方
Provider
// Provider,顧名思義為小元件提供資訊得一個struct struct Provider: TimelineProvider { public typealias Entry = SimpleEntry // 編輯螢幕時,左上角選擇新增小元件時候,第一次展示小元件會走這個方法 public func snapshot(with context: Context,completion: @escaping (SimpleEntry) -> ()) { } // 這個方法內可以進行網路請求,拿到的資料儲存在對應的 entry 中,呼叫 completion 之後會到重新整理小元件 public func timeline(with context: Context,completion: @escaping (Timeline<Entry>) -> ()) { // 例如這是一個網路請求 Network.request { data in let entry = SimpleEntry(date: renderDate,data: data) let timeline = Timeline(entries: [entry],policy: .after(nextRequestDate)) completion(timeline) } } }
Entry
官方解釋: A type that specifies the date to display a widget,and,optionally,indicates the current relevance of the widget's content.
// 我的理解是就是儲存小元件的資料的一個東西 struct SimpleEntry: TimelineEntry { let date: Date let data: Data }
PlacehodlerView
// 這個是一個預設檢視,例如網路請求失敗、發生未知錯誤、第一次展示小元件都會展示這個view struct PlaceholderView : View { }
WidgetEntryView
// 這個是我們需要佈局小元件長什麼樣子的view struct StaticWidgetEntryView : View { }
主入口
@main struct StaticWidget: Widget { private let kind: String = "StaticWidget" public var body: some WidgetConfiguration { StaticConfiguration(kind: kind,provider: Provider(),placeholder: PlaceholderView()) { entry in StaticWidgetEntryView(entry: entry) } .configurationDisplayName("My Widget") .description("This is an example widget.") } }
支援多Widget樣式
@main struct MainWidgets: WidgetBundle { @WidgetBundleBuilder var body: some Widget { Widget1() Widget2() } }
勾選 Include Configuration Intent 之後可能出錯的地方
如果你的app中設定了 Class Prefix 這下面這個 ConfigurationIntent.self 則需要加上對應的字首
例如字首是 XY 則需要修改為 XYConfigurationIntent.self
@main struct MainWidget: Widget { private let kind: String = "MainWidget" public var body: some WidgetConfiguration { IntentConfiguration(kind: kind,intent: XYConfigurationIntent.self,placeholder: PlaceholderView()) { entry in IntentWidgetEntryView(entry: entry) } .configurationDisplayName("My Widget") .description("This is an example widget.") } }
處理Widget點選事件
Widget 支援三種顯示方式,分別是 systemSmall 、 systemMedium 、 systemLarge
small 樣式只能用 widgetUrl 處理
@ViewBuilder var body: some View { ZStack { AvatarView(entry.character) .widgetURL(url) .foregroundColor(.white) } .background(Color.gameBackground) }
medium 和 large 可以用 Link 或者 widgetUrl 處理,我們看到裡面有四個相同的view,即左邊圖片,右邊文字的,這個view程式碼如下(Link方式)
struct RecipeView: View { let recipe: RecipeModel var body: some View { Link(destination: URL(string: "你的網址")!) { HStack { WebImageView(imageUrl: recipe.squareImageUrl) .frame(width: 65,height: 65) Text(recipe.adjName + recipe.name) .font(.footnote) .bold() .foregroundColor(.black) .lineLimit(3) } } } }
新增 Link 或 widgetUrl 後,點選每個 RecipeView 都會觸發事件,這時候你需要在主專案中的 AppDelegate 中的如下方法進行處理
func application(_ app: UIApplication,open url: URL,options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool { }
關於Widget中載入網路圖片的時機
當我們在func timeline(withcompletion)這個方法中請求到資料拿到圖片連結後,必須同步把圖片解析出來,否則直接讓對應的WidgetView去load url 是載入不出來的
正確的寫法
Struct Model { ... let image: UIImage } func timeline(with context: Context,completion: @escaping (Timeline<LFPlanEntry>) -> ()) { Network.request { data in // 解析圖片 var image: UIImage? = nil if let imageData = try? Data(contentsOf: url) { image = UIImage(data: imageData) } let model = Model(image: image ?? defalutImage) // 這裡給個預設圖片 let entry = SimpleEntry(date: entryDate,data: model) let timeline = Timeline(entries: [entry],policy: .atEnd) completion(timeline) } } Struct WidgetView: View { let model: Model @ViewBuilder var body: some View { Image(uiImage: model.image) .resizable() } }
錯誤的寫法(直接丟url給view去載入)
struct WidgetView : View { let model: Model @State private var remoteImage : UIImage? = nil let defaultImage = UIImage(named: "default")! var body: some View { Image(uiImage: self.remoteImage ?? defaultImage) .onAppear(perform: fetchRemoteImage) } func fetchRemoteImage() { guard let url = URL(string: model.url) else { return } URLSession.shared.dataTask(with: url){ (data,response,error) in if let image = UIImage(data: data!){ self.remoteImage = image } else { print(error ?? "") } }.resume() } }
基於我們的app做出來的簡單效果圖
Widget相關資料
Widgets
Creating a Widget Extension
Keeping a Widget Up To Date
Making a Configurable Widget
到此這篇關於詳解iOS14 Widget 開發相關及易報錯地方處理的文章就介紹到這了,更多相關iOS14 Widget開發內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!