溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
首先了解下如何創建
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, provider: Provider(), 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開發內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
