SwiftUI Widget Extension小组件

iOS 14新推出了Widget Extension插件,基于SwiftUI开发,对于用户而言叫小组件,iOS14后废弃了之前Today Extension,而Widget Extension定制性更高,支持三种样式,小中大2 * 2、4 * 2、4 * 4(systemSmall、systemMedium、systemLarge)

创建Widget Extension插件

在原有的项目中创建Widget Extension

1、File->New->Target选择Widget Extension


选择Widget Extension.png

2、输入widget名字下一步

image.png

3、天气组件代码

import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        return WeatherPoser.dafaultEntry()
    }
    
    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = WeatherPoser.dafaultEntry()
        completion(entry)
    }
    
    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        let currentDate = Date()
        //设定1小时更新一次数据
        let updateDate = Calendar.current.date(byAdding: .hour, value: 1, to: currentDate)!
        
        let entry = WeatherPoser.dafaultEntry()
        let timeline = Timeline(entries: [entry], policy: .after(updateDate))
        completion(timeline)
        
        /*
         // 真实网络请求
         WeatherPoser.requestNow { result in
         if case .success(let now) = result {
         let entry = Entry(date: currentDate, dataList: poster, cityName: String(name), today: now)
         let timeline = Timeline(entries: [entry], policy: .after(updateDate))
         completion(timeline)
         }
         }
         */
        
    }
    
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let dataList: [WeatherModel]
    let cityName: String
    let today: Now
}

struct WeatherWidgetEntryView : View {
    var entry: Provider.Entry
    @Environment(\.widgetFamily) var family:WidgetFamily
    
    var body: some View {
        switch family {
        case .systemSmall:
            VStack {
                Text("body")
            }
        case .systemMedium:
            MediumWeatherView(entry: entry)
        case .systemLarge:
            VStack {
                Text("body")
            }
        default:
            MediumWeatherView(entry: entry)
        }
    }
}

@main
struct WeatherWidget: Widget {
    let kind: String = "WeatherWidget"
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("天气")
        .description("显示最近天气预报")
    }
}

struct WeatherWidget_Previews: PreviewProvider {
    static var previews: some View {
        let entry = WeatherPoser.dafaultEntry()
        WeatherWidgetEntryView(entry: entry)
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

struct MediumWeatherView: View {
    var entry: Provider.Entry
    var body: some View {
        VStack {
            HStack(alignment: .center){
                Image("blue_loc").frame(width: 12, height: 12, alignment: .center).aspectRatio(contentMode: .fit)
                Text(self.entry.cityName)
                Spacer()
                Text(self.entry.date, style: .date)
            }
            HStack(alignment: .center){
                if let text = self.entry.today.text {
                    Image(text).frame(width: 44, height: 44, alignment: .center).aspectRatio(contentMode: .fit)
                    let temperature = self.entry.today.temperature
                    Text((temperature + "°"))
                        .font(.largeTitle)
                        .fontWeight(.semibold)
                }
                ForEach(entry.dataList) {item in
                    if item.id == 0 {
                        VStack {
                            Text(item.weather)
                            Text(item.temp)
                        }
                    }
                }
                Spacer()
            }
            Spacer()
            HStack(alignment: .center){
                ForEach(entry.dataList) {item in
                    if item.id > 0 {
                        WeatherDayView(item:item)
                    }
                }
            }
        }.padding(11.0)
    }
}

struct WeatherDayView: View {
    var item: WeatherModel
    var body: some View {
        HStack(alignment: .center, spacing: 12){
            Image(self.item.weather).frame(width: 30, height: 30, alignment: .center).aspectRatio(contentMode: .fit)
            VStack(alignment: .leading) {
                Text(self.item.title)
                    .font(.body)
                    .foregroundColor(Color(hue: 0.275, saturation: 0.74, brightness: 0.621))
                Text(self.item.temp)
                    .font(.body)
            }
        }
    }
}


struct Now: Identifiable {
    var temperature: String = ""
    var text: String = ""
    var id: Int = 0
}
struct WeatherModel: Identifiable {
    var weather: String = ""
    var title: String = ""
    var temp: String = ""
    var id: Int = 0
}

struct WeatherPoser {
    static func dafaultEntry() -> SimpleEntry {
        let dataList = [
            WeatherModel(weather: "晴", title: "今天", temp: "20/36°", id: 0),
            WeatherModel(weather: "晴", title: "明天", temp: "20/36°", id: 1),
            WeatherModel(weather: "晴", title: "后天", temp: "20/36°", id: 2),
            WeatherModel(weather: "晴", title: "周四", temp: "20/36°", id: 3)
        ]
        let now = Now(temperature: "30", text: "多云", id: 0)
        return SimpleEntry(date: Date(), dataList: dataList, cityName: "北京市", today: now)
    }
    
}

4、显示效果


image.png

支持指定尺寸supportedFamilies

StaticConfiguration(kind: kind, provider: Provider()) { entry in
    WeatherWidgetEntryView(entry: entry)
}
.configurationDisplayName("天气")
.description("显示最近天气预报")
.supportedFamilies([.systemMedium])

刷新全部组件

WidgetCenter.shared.reloadAllTimelines()

刷新指定组件

WidgetCenter.shared.reloadTimelines(ofKind: "widgetName")

判断有没有配置显示组件

WidgetCenter.shared.getCurrentConfigurations { result in
      switch result {
      case .success(let widgetInfos):
           if widgetInfos.count > 0 {
              print("组件已配置")
           }
           print(widgetInfos)
       case .failure(let err):
              print(err)
       }
 }

数据共享,需要配置group证书关联

let widgetDafault = UserDefaults(suiteName: "group.com.wynter.widget"
widgetDafault?.set("北京市", forKey: "cityName")

let cityName = String(widgetDafault?.string(forKey: "cityName") ?? "北京市")
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容