【iOS小组件】第一个小组件

前言

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点，修改后的代码：

import WidgetKit
import SwiftUI


extension View {
    
    @ViewBuilder
    func widgetBackground(_ backgroundView: some View) -> some View {
        if #available(iOS 17.0, *) {
            containerBackground(for: .widget) {
                backgroundView
            }
        } else {
            background(backgroundView)
        }
    }
}

extension WidgetConfiguration {
    
    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] = []

        
        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)
        }
        
        .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.")
        
        .adoptableWidgetContentMargin()
    }
}


struct widget_Previews: PreviewProvider {
    static var previews: some View {
        widgetEntryView(entry: SimpleEntry(date: Date(), emoji: "😁"))
            .previewContext(WidgetPreviewContext(family: .systemMedium))
    }
}

运行效果

如果第一次运行后找不到对应的小组件，可以尝试先点开App再去查看小组件‍

ycnsjibi4o6s.feishu.cn/docx/MHQTdn…

选中 widgetExtension Target，然后【Command + R】运行：

运行成功后，在屏幕上会直接展示小组件。

也可以运行 App Target 按下面完整流程添加：
长按屏幕 -> 点击左上角➕ -> 搜索项目名(检索小组件) -> 添加需要样式小组件

添加小组件后即可使用，这里小组件是可以拖到任意屏幕的（小组件新特性）。

友情链接

Swift 官方教程:

developer.apple.com/swift

SwiftUI 官方教程:

developer.apple.com/tutorials/s…

本文同步自微信公众号 “程序员小溪” ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。