挑戰(zhàn)接受！話說(shuō)最近圍繞著Widget的話題可真是熱熱鬧鬧??！相信各位腕上功夫高超的大佬們已經(jīng)津津有味的把Widget搞起來(lái)，有沒(méi)有搞得挺過(guò)癮的感覺(jué)？那對(duì)于還在Widget上懵懵懂懂的小白們來(lái)說(shuō)，不要慌，我來(lái)給你帶來(lái)一場(chǎng)Widget的構(gòu)建之旅~

Widget這個(gè)東西，在iOS14上被蘋(píng)果官方推出來(lái)了，也就是說(shuō)，新的Widget視圖可以顯示在用戶(hù)的主屏幕上了，豐富了iOS系統(tǒng)的形態(tài)。以前呢，我們只有在通知中心中看到過(guò)Widget，iOS14中的Widget可以顯示在桌面上了，但是有一個(gè)限制——最多只能放置10個(gè)同類(lèi)型（大小不同，大的和小的算兩個(gè)）的Widget。不過(guò)，這完全不影響我們嗨皮構(gòu)建Widget呀！

首先呢，我們得創(chuàng)建一個(gè)Widget Extension目標(biāo)。步驟如下：

- 打開(kāi)Xcode，然后選擇File -> New -> Target。

- 在展開(kāi)的菜單中，找到Application Extension,然后點(diǎn)擊下面的Widget Extension。

- 按下Next，輸入Product Name ，可選擇相關(guān)的 Group，再按Create，此時(shí)Xcode會(huì)自動(dòng)生成 Widget Extension 代碼結(jié)構(gòu)。

除此之外，我們還需要對(duì)Widget中的View進(jìn)行設(shè)置，比如widgetFamily、body、等等。代碼舉例：

```swift

struct MyAppWidgetView: View {

var body: some View {

VStack {

Text("這里是Widget的標(biāo)題")

Image(systemName: "cloud.sun.rain.fill")

.font(.system(size: 50))

Text("這里是Widget的內(nèi)容")

}

.padding(EdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10))

}

}

@main

struct MyAppWidget: Widget {

let kind: String = "MyAppWidget"

var body: some WidgetConfiguration {

StaticConfiguration(kind: kind, provider: MyProvider()) { entry in

MyAppWidgetView()

}

.configurationDisplayName("小I")

.description("這是一個(gè)自定義小組件") }

}

struct MyEntry: TimelineEntry {

let date: Date

let relevance: TimelineEntryRelevance?

let name: String

}

struct MyProvider: TimelineProvider {

func placeholder(in context: Context) -> MyEntry {

MyEntry(date: Date(), relevance: nil, name: "占位")

}

func getSnapshot(in context: Context, completion: @escaping (MyEntry) -> ()) {

let entry = MyEntry(date: Date(), relevance: nil, name: "快照")

completion(entry)

}

func getTimeline(in context: Context, completion: @escaping (Timeline) -> ()) {

let entry = MyEntry(date: Date(), relevance: nil, name: "刻度")

let timeline = Timeline(entries: [entry], policy: .atEnd)

completion(timeline)

}

}

```

上面這段代碼主要功能就是構(gòu)建一個(gè)簡(jiǎn)單的Widget，你可以根據(jù)自己的需求進(jìn)行修改。其中：

- MyAppWidgetView：是Widget中的View，用來(lái)展示widget的樣式，響應(yīng)事件，可視為一個(gè)自定義的小組件。

- MyProvider：插件提供程序，用于提供有關(guān)小組件的信息，比如占位符，快照和時(shí)間軸數(shù)據(jù)。

Widget中有幾個(gè)屬性值，我們可以自己設(shè)置，分別如下：

- var widgetFamily: @WidgetFamily ：當(dāng)前的Widget的類(lèi)型，目前有三種：systemSmall、systemMedium、systemLarge，分別表示簡(jiǎn)約型、中等型、詳細(xì)型。

- var body: Body ：主要內(nèi)容，是一個(gè)AnyView類(lèi)型的值，這意味著你可以返回任何的類(lèi)型作為主要內(nèi)容，包括文字、圖片、按鈕等等。

而且，除此之外，我們還可以把小組件設(shè)置成動(dòng)態(tài)類(lèi)型的Widget。動(dòng)態(tài)類(lèi)型的Widget意味著視圖在不同的狀態(tài)下會(huì)呈現(xiàn)不同的內(nèi)容。所以我們還需要 TimelineProvider 和 TimelineEntry。

TimelineProvider：提供時(shí)間軸支持來(lái)展示動(dòng)態(tài)Widget的更新數(shù)據(jù)的可演變過(guò)程，主要功能是獲取用于更新小組件的數(shù)據(jù)。

TimelineEntry：構(gòu)建數(shù)據(jù)源模型的內(nèi)容，它有三個(gè)參數(shù)：

- date：時(shí)間datetime類(lèi)型的，表示數(shù)據(jù)的生成時(shí)間；

- relevance：數(shù)據(jù)時(shí)效性相關(guān)，和date一起使用；

- content：小組件的內(nèi)容，參數(shù)可以是任何小組件。

呼~(yú)~~深呼吸，是不是有點(diǎn)看不懂了？別著急，我們還是直接看一下代碼：

```swift

struct MyAppWidgetView: View {

var text: String

var body: some View {

Text(text)

}

}

@main

struct MyAppWidget: Widget {

let kind: String = "MyAppWidget"

var body: some WidgetConfiguration {

StaticConfiguration(kind: kind, provider: MyProvider()) { entry in

MyAppWidgetView(text: entry.text)

}

.configurationDisplayName("小I")

.description("這是一個(gè)自定義小組件")

}

}

//TimelineProvider適用于具有周期更新行為的Widget

struct MyProvider: TimelineProvider {

//定義一個(gè)返回PlaceholderEntry類(lèi)型元素的函數(shù)

func placeholder(in context: Context) -> MyEntry {

MyEntry(date: Date(), relevance: nil, text: "占位")

}

//.systemSmall為Static Configuration下的子配置項(xiàng)

func getSnapshot(in context: Context, completion: @escaping (MyEntry) -> ()) {

let entry = MyEntry(date: Date(), relevance: nil, text: "快照")

completion(entry)

}

//根據(jù)傳遞的參數(shù)，在構(gòu)建初始視圖之后獲取一組一次性數(shù)據(jù)，主要用于更新Widget的初始狀態(tài)

func getTimeline(in context: Context, completion: @escaping (Timeline) -> ()) {

var entries = [MyEntry]()

// Generate a timeline consisting of five entries an hour apart, starting from the current date.

let currentDate = Date()

for hourOffset in 0 ..< 5 {

let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!

let entry = MyEntry(date: entryDate, relevance: nil, text: "\(hourOffset) 小時(shí)前的數(shù)據(jù)")

entries.append(entry)

}

let timeline = Timeline(entries: entries, policy: .atEnd)

completion(timeline)

}

}

struct MyEntry: TimelineEntry {

let date: Date

let relevance: TimelineEntryRelevance?

let text: String

}

```

其中：

- MyAppWidgetView：展示W(wǎng)idget中的內(nèi)容，這里我們把展示的內(nèi)容設(shè)置成TextView。

- MyProvider：數(shù)據(jù)提供者，在初始化，快照視圖和時(shí)間軸更新中生成Widget的初始狀態(tài)。

- TimelineProvider、TimelineEntry：此處涉及到了數(shù)據(jù)的更新，在getTimeline() 方法中每小時(shí)更新一次數(shù)據(jù)，共更新五次。而MyEntry則是每次更新所包含的數(shù)據(jù)內(nèi)容，這里我們只包含一個(gè)text屬性。

好了，到這里，我們就介紹完了包含構(gòu)建靜態(tài)Widget和動(dòng)態(tài)Widget的全部?jī)?nèi)容。如果你還不理解或者有疑問(wèn)，可以再看看代碼或者私信我哦~(BuildContext) www.yinyiprinting.cn 寧波海美seo網(wǎng)絡(luò)優(yōu)化公司 是網(wǎng)頁(yè)設(shè)計(jì)制作，網(wǎng)站優(yōu)化，企業(yè)關(guān)鍵詞排名，網(wǎng)絡(luò)營(yíng)銷(xiāo)知識(shí)和開(kāi)發(fā)愛(ài)好者的一站式目的地，提供豐富的信息、資源和工具來(lái)幫助用戶(hù)創(chuàng)建令人驚嘆的實(shí)用網(wǎng)站。 該平臺(tái)致力于提供實(shí)用、相關(guān)和最新的內(nèi)容，這使其成為初學(xué)者和經(jīng)驗(yàn)豐富的專(zhuān)業(yè)人士的寶貴資源。