iOS开发之构建Widget

一、概述

Widget是iOS14引入的新特性，它可以让用户在桌面上直接查看应用中的部分内容，而无需打开应用程序。在日常使用中，我们可以使用Widget快速查看天气、日历、提醒事项等等。对于开发者来说，构建Widget不仅可以为用户带来便利，还可以提高应用的使用率和曝光率。

本文将介绍如何在Xcode中构建Widget，具体包括：如何创建一个Widget项目、如何定义Widget的大小、如何在Widget中显示内容等。最后，我们还将分享一个简单的天气Widget示例。

二、创建Widget项目

1. 打开Xcode，选择创建一个新的项目

2. 选择应用模板，选择Widget Extension

3. 在后面的配置页面中，为您的Widget选择应用程序并命名它。

4. 在下面的Extension部分中，选择Widget创建类型和大小。

三、定义Widget的大小

在创建Widget项目时，需要选择Widget的大小。目前，有三种大小可供选择：

1. Small：177x93像素

2. Medium：364x170像素

3. Large：364x345像素

从这些大小中，需要选择一个尺寸来定义你的Widget。

四、在Widget中显示内容

在Widget中显示内容需要定义一个Widget视图，以及在Widget中显示的内容。可以通过在Widget的Target中打开 Widget.swift 文件来定义 Widget 的视图。

在Widget.swift文件中，我们需要定义一个struct来描述Widget，并可以实现一些必需的协议，以告诉WidgetKit如何更新Widget。

```

// 可配置的 Widget 属性

struct WeatherEntry: TimelineEntry {

public let date: Date

public let weather: String

public let temperature: String

}

@main

struct WeatherWidget: Widget {

private let kind: String = "WeatherWidget"

// 将此 Widget 添加到 Widget 库之前预览它。

public var body: some WidgetConfiguration {

IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: WeatherProvider()) { entry in

WeatherEntryView(entry: entry)

}

.configurationDisplayName("My Widget Configuration")

.description("This is an example widget.")

}

}

```

上面的代码定义了一个名为WeatherWidget的Widget，它显示了天气和温度。

我们还需要定义一个提供者来为Widget提供数据，如天气和温度。在下面的WeatherProvider.swift文件中，我们需要定义一个WeatherProvider类，实现TimelineProvider协议中的方法，以告诉WidgetKit如何更新Widget。

```

struct WeatherProvider: IntentTimelineProvider {

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

WeatherEntry(date: Date(), weather: "Sunny", temperature: "72")

}

func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (WeatherEntry) -> ()) {

let entry = WeatherEntry(date: Date(), weather: "Sunny", temperature: "72")

completion(entry)

}

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

var entries: [WeatherEntry] = []

// 用你的网络 API 获取天气数据，声明为 weather 和 temperature 变量

// 创建一个 "WeatherEntry" 实例，保存上一步中获取的天气数据

let entry = WeatherEntry(date: Date(), weather: weather, temperature: temperature)

// 把新的 "WeatherEntry" 实例添加到 entries 数组中

entries.append(entry)

// 创建 "Timeline" 实例，并设置一个日期，表示下一个时间点更新 Widget 数据

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

// 调用 completion，表示外部数据已准备好更新。

completion(timeline)

}

}

```

在这个类中，我们实现了三个方法：

1. placeholder(in:)：返回一个占位符供Widget使用

2. getSnapshot(for:in:completion:)：在Widget添加到桌面时，WidgetKit会调用此方法返回Widget的快照

3. getTimeline(for:in:completion:)：用于向Widget提供实际内容，并定义什么时候下一个内容变化。在这个方法中，我们使用网络 API 获取天气数据并创建一个新的WeatherEntry实例，随后将其添加到entries数组中。最后，使用timeline实例表示趋势和更新时间点。

最后，我们还需要定义如何显示Widget的内容。在WeatherEntryView.swift文件中，我们定义了一个WeatherEntryView。

```

struct WeatherEntryView : View {

var entry: WeatherEntry

var body: some View {

ZStack {

Image("WeatherBackground")

.resizable()

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

.edgesIgnoringSafeArea(.all)

VStack {

Text(entry.weather)

.font(.title)

Text(entry.temperature)

.font(.headline)

}

}

}

}

```

在这个视图中，我们使用一个ZStack将背景图放在最底层，并在上面添加一个VStack来显示天气和温度。

五、天气Widget示例

完整的天气Widget示例代码可以在https://github.com/young-cc/blog-sample-code/blob/main/WeatherWidget/ 中找到。在这个例子中，我们使用OpenWeatherMap API来获取天气数据，使用CoreLocation框架获取位置信息。不过，在这个例子中，您需要手动将您的OpenWeatherMap API密钥添加到WeatherClient.swift中。

从代码中可以看出，构建Widget的具体步骤如下：

1. 定义一个Widget结构体，并实现必要的协议。

2. 定义一个数据提供程序，实现 TimelineProvider 协议中的方法，并在其中使用网络接口获取天气数据。

3. 定义一个WidgetEntryView，以根据提供程序提供的数据创建Widget内容。

六、总结

在iOS14中，Widget是一个非常有用的特性，可以带来一些方便和简洁。对于开发者来说，构建Widget不需要太多的工作，只需要实现几个必要的协议，然后提供Widget的数据和视图即可。这些协议能够处理Widget的更新，数据获取和如何显示Widget的内容。

在构建Widget时，要注意尺寸和排版，以确保内容的适当展示。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！