如何为 iOS14 创建一个 Widget

> Widget 是 iOS14 的新特性,是一个桌面小插件,它的 UI 需要使用到 SwiftUI, 所以想要写 Widget 首先需要学会写 SwiftUI. 最终代码 Github(https://github.com/wintelsui/iOS14Widget)

准备写个包括三种样式的简单的 Widget

• WidgetFamily中包含 3 中定义: systemSmall // A small widget. systemMedium //A medium-sized widget. systemLarge // A large widget 具体大小可以看苹果的设计指南 https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/widgets/

• Widget 又有 2 中配置,静态和动态,区别在于是否使用了Intent StaticConfiguration 和 IntentConfiguration. 如果需要"编辑小组件"中设置 Widget 参数,那么就需要用到Intent.

随意创建一个iOS项目(无关紧要,因为我们只在乎 Widget), 然后创建Target 选择 Widget Extension

因为需要显示 "编辑小组件" 中 配置参数,所以选择 "Include Configuration Intent"

创建完成后,我们先来编辑一下TestWidget.intentdefinition文件, 这里我将它自动生成的Configuration(改一个有辨识度的名字,改名字这一步不做也可以) 随意的改成 TestWidgetConfiguration,去TestWidget.swift文件中将原有的ConfigurationIntent都替换为TestWidgetConfigurationIntent, 并 build 一次(会自动生成TestWidgetConfigurationIntent.swift 类), 让后在 Parameters 中添加两个参数,并配置类型.

现在我们运行一下代码,并在手机上把 Widget 添加到桌面, 长按Widget显示菜单,选择"编辑小组件",这时我们将看到我们的参数:

下面到了去写代码的时间了

模板生成了一些必要的代码:

• struct PlaceholderView : View {} 是临时展示的视图

• struct TestWidgetEntryView : View {} 是 Widget 展示的主要视图

• struct SimpleEntry: TimelineEntry {} 是 Widget 的时间线中必要的对象

• struct Provider: IntentTimelineProvider {} 控制着 Widget 的刷新,我们要提供一些用于刷新的内容,比如请求网络数据后提交给时间线显示数据.

/// 用于展示时候的快照(在插件中心选择插件时候)
public func snapshot(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (SimpleEntry) -> ()) {}

/// 是真是的展示情况
public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline<entry>) -&gt; ()) {}

在这里 timeline 这个方法的刷新规律,并不清楚,看WWDC视频的时候,感觉难道是 30 分钟左右吗? 反正应用并不知道什么时候会刷新(当然貌似可以从主程序中调用 WidgetCenter.shared.reloadAllTimelines() 强制刷新),但是不管怎样,我们需要在timeline被调用时,提供数据用于展示.

开始编写代码 timeline(for configuration:....方法

    public func timeline(for configuration: TestWidgetConfigurationIntent, with context: Context, completion: @escaping (Timeline<entry>) -&gt; ()) {
        
        // 读取了设置中的参数, 实际上并不用,只是展示一下这个功能怎么写
        let userName = configuration.userName ?? ""
        let showFullName = configuration.showFullName?.boolValue ?? true
        
        //此处并不着急completion(),可以发起网络请求等
        /*
         let reqUrl = URL(string: "https://api.xygeng.cn/Bing")!
         let task = URLSession.shared.dataTask(with: reqUrl) { (data, response, error) in
             guard error == nil else {
                 let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
                 let entry = SimpleEntry(date: entryDate)
                 let timeline = Timeline(entries: [entry], policy: .after(entryDate))
                 completion(timeline)
                return
             }
             let _ = getCommitInfo(fromData: data!)
                 let entryDate = Calendar.current.date(byAdding: .second, value: 20, to: Date())!
                 let entry = SimpleEntry(date: entryDate)
                 let timeline = Timeline(entries: [entry], policy: .after(entryDate))
                 completion(timeline)
             }
          task.resume()
         */
        
        //本代码 在 2 秒后刷新界面
        let entryDate = Calendar.current.date(byAdding: .second, value: 2, to: Date())!
        let entry = SimpleEntry(date: entryDate)
        let timeline = Timeline(entries: [entry], policy: .after(entryDate))
        completion(timeline)
    }

视图代码,使用 @Environment(.widgetFamily) var family 来判断当前是什么大小样式,其中PhotoView不多说了,是 Image 加了边框.

struct TestWidgetEntryView : View {
    var entry: Provider.Entry

    @Environment(\.widgetFamily) var family
    
    @ViewBuilder
    var body: some View {
        switch family {
            case .systemSmall:
                ZStack {
                    Color(red: 0.55, green: 0.73, blue: 1.0)
                    VStack(spacing: 10) {
                        PhotoView(imageName: "aragaki")
                    }
                }
            case .systemMedium:
                ZStack {
                    Color(red:0.61, green:0.35, blue:0.71)
                    HStack(spacing: 10) {
                        PhotoView(imageName: "aragaki2")
                        Text("Aragaki")
                            .font(Font.system(size: 18))
                            .fontWeight(.heavy)
                            .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                        
                    }
                }
            default:
                ZStack {
                    Color(red:0.97, green:0.54, blue:0.88)
                    VStack {
                        HStack(spacing: 10) {
                            PhotoView(imageName: "aragaki3")
                            Text("Aragaki")
                                .font(Font.system(size: 18))
                                .fontWeight(.heavy)
                                .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                            
                        }
                        
                        Text("Aragaki")
                            .font(Font.system(size: 18))
                            .fontWeight(.heavy)
                            .shadow(color: Color.gray, radius: 5, x: 2, y: 2)
                        
                    }
                }
        }
    }
}

最终运行效果

最终代码 Github(https://github.com/wintelsui/iOS14Widget)</entry></entry>