【iOS小组件】第一个小组件前言 iOS屏幕小组件 Widget 是iOS 14发布的，目前国内外很多App 已经支持了

前言

iOS屏幕小组件 Widget 是iOS 14发布的，目前国内外很多App 已经支持了。

开发小组件必须使用 Swift、SwiftUI，如果你还没接触过 Swift 及SwiftUI，可以先去学习一些基础知识，链接已附上。

系统支持🌟🌟🌟🌟🌟

iOS 14及以上系统

当前环境

XCode 15.3
最低支持发布版本iOS14

创建小组件

操作路径：Xcode -> File -> New -> Target 搜索 widget Extension

点击下一步

Product Name：小组件的项目名称
- 建议使用 大驼峰格式，如"Widget"，这个名称与创建出来的文件名一致。
- 该名称与小组件的 Bundle ID 相关，比如这里叫 widget，对应生成的 Bundle ID 即为"com.xx.xx.widget"，"com.xx.xx"为主工程App的 Bundle ID
Include Live Activity：与灵动岛相关，根据需要勾选
Include Configuration App Intent ：与动态配置相关，根据需要勾选
Project：主工程项目Target
Embed in Application：与小组件关联的应用程序, 默认即可

小组件结构

小组件创建成功后，会多出来一个扩展Target：

同时也会创建一个 widget 文件夹：

widgetBundle：小组件代码入口文件
widgetLiveActivity：小组件灵动岛配置入口文件
widget：小组件代码文件
AppIntent：小组件动态意图配置入口文件
Assets**：存放小组件需要用的资源
Info：小组件配置信息

修改代码

如果你使用默认系统版本（iOS17以上）可以直接跳过

这里使用的 target 最低兼容版本为14.0, XCode15.3 默认创建的示例无法直接运行，需要对代码进行更改

‍

ycnsjibi4o6s.feishu.cn/docx/MHQTdn…

修改内容主要有4点，修改后的代码：

// widget.swift
import WidgetKit
import SwiftUI

// =========== 修改点1-解决报错的扩展 =========== //
extension View {
    // 背景
    @ViewBuilder
    func widgetBackground(_ backgroundView: some View) -> some View {
        if #available(iOS 17.0, *) {
            containerBackground(for: .widget) {
                backgroundView
            }
        } else {
            background(backgroundView)
        }
    }
}

extension WidgetConfiguration {
    // 是否允许content margin
    func adoptableWidgetContentMargin() -> some WidgetConfiguration {
        if #available(iOSApplicationExtension 15.0, *) {
            print("15.0 以上系统")
            return contentMarginsDisabled()
        } else {
            print("15.0 以下系统")
            return self
        }
    }
}
// =========== 解决报错的扩展 =========== //

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), emoji: "😀")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), emoji: "😀")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []

        // 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 = SimpleEntry(date: entryDate, emoji: "😀")
            entries.append(entry)
        }

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

struct SimpleEntry: TimelineEntry {
    let date: Date
    let emoji: String
}

struct widgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        VStack {
            Text("Time:")
            Text(entry.date, style: .time)

            Text("Emoji:")
            Text(entry.emoji)
        }
        // 修改点2-处理背景兼容
        .widgetBackground(Color.white)
    }
}

struct widget: Widget {
    let kind: String = "widget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            widgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        // 修改点3-内容边距
        .adoptableWidgetContentMargin()
    }
}

// 修改点4--修改预览语法
struct widget_Previews: PreviewProvider {
    static var previews: some View {
        widgetEntryView(entry: SimpleEntry(date: Date(), emoji: "😁"))
            .previewContext(WidgetPreviewContext(family: .systemMedium))
    }
}