WidgetKit — vad är det, ramverk för widgets och SwiftUI

Vad är WidgetKit och hur fungerar det?

WidgetKit — Apples ramverk för att skapa widgets som visar innehåll på systemets skärmar för Apple-enheter. En widget är en miniatyrrepresentation av din app som användaren placerar på startskärmen i skakläge (jiggle mode). Till skillnad från watchOS-komplikationer som fanns före WidgetKit har det nya ramverket enhetliggjort skapandet av widgets för alla Apple-plattformar genom ett enhetligt API på SwiftUI.

WidgetKits funktionsprincip är baserad på TimelineProvider — ett objekt som skapar en ordnad array av TimelineEntry, där varje post innehåller en ögonblicksbild (specifikt widgettillstånd vid en viss tidpunkt). Systemet visar posterna sekventiellt och uppdaterar widgeten vid övergången till nästa post på tidslinjen. Mellan posterna anropar WidgetKit inte applikationskoden — processortid förbrukas endast när en ny Timeline skapas.

Enligt data från WWDC 2024 Session „WidgetKit: What’s new” har den genomsnittliga iOS-användaren 8–12 widgets på startskärmen, och de mest populära kategorierna är väder, tid, kalender, fitness och ekonomi. WidgetKit förbrukar mindre än 1% batteri per dag vid normal användning eftersom uppdateringar sker enligt ett schema, inte i realtid.

Vad skiljer WidgetKit från gamla Today Extension

Före iOS 14 fanns widgets endast som Today View — en panel som var åtkomlig genom att svepa åt vänster från den första skärmen. Today Extension hade allvarliga begränsningar: de var endast tillgängliga på skärmen „Idag”, krävde att appen öppnades för att uppdatera innehåll och hade begränsat stöd för storlekar. WidgetKit har helt ersatt Today Extension och erbjuder widgets på startskärmen, låsskärmen (iOS 16+) och Mac-skrivbordet.

• Widgets på startskärmen, inte bara i Today View
• Självständig uppdatering via TimelineProvider, utan att öppna appen
• Tre fördefinierade storlekar istället för en
• Smart Rotate och Smart Stack — automatisk rotation av widgets av systemet
• Enhetligt API på SwiftUI för alla Apple-plattformar

WidgetKit-arkitektur: TimelineProvider och Entry

WidgetKits arkitektur bygger på tre nyckelprotokoll: TimelineProvider, TimelineEntry och Widget. TimelineEntry är en datamodell som representerar widgetens tillstånd vid en specifik tidpunkt. TimelineProvider skapar en array av sådana poster (Timeline) med ett aktiveringsdatum för varje post. Widget — ingången som kopplar leverantören till SwiftUI-vyn.

Metoden getTimeline anropas av systemet när widgeten först läggs till och sedan periodiskt — vanligtvis var 1–6:e timme beroende på leverantörstypen. Timeline kan innehålla poster för timmar eller dagar framöver, vilket gör att widgeten kan fungera utan att anropa applikationskoden mellan uppdateringar. Om widgeten behöver uppdateras akut (t.ex. valutakursen ändrades) kan appen tvångsanropa WidgetCenter.shared.reloadAllTimelines().

Grundläggande TimelineProvider

struct SimpleEntry: TimelineEntry {
    let date: Date
    let value: Double
}

struct Provider: TimelineProvider {
    typealias Entry = SimpleEntry
    
    func placeholder(in context: Context) -> Entry {
        Entry(date: Date(), value: 0)
    }
    
    func getSnapshot(
        in context: Context,
        completion: @escaping (Entry) -> Void
    ) {
        Entry(date: Date(), value: 42.5)
    }
    
    func getTimeline(
        in context: Context,
        completion: @escaping (Timeline<Entry>, Error?) -> Void
    ) {
        let entry = Entry(date: Date(), value: fetchLatestValue())
        let nextUpdate = Calendar.current
            .date(byAdding: .hour, value: 1, to: Date())!
        let timeline = Timeline(entries: [entry], policy: .after(nextUpdate))
        completion(timeline, nil)
    }
}

Widget Family: small, medium, large

WidgetKit stödjer tre widgetstorlekar, var och en med fasta proportioner. Small (170×170 pt på iPhone) visar kompakt information — ett värde, en ikon eller kort text. Medium (364×170 pt) är dubbelt så bred som small och lämpar sig för att visa ett par värden eller en minigraf. Large (364×382 pt) tar upp nästan halva skärmen vertikalt och möjliggör visning av tabeller, listor eller utökad data.

Utvecklaren måste stödja minst två storlekar — Apple rekommenderar small + medium. Large-widget behövs endast om appen har tillräckligt med innehåll för att fylla en sådan volym. Varje storlek får sin egen SwiftUI-vy som WidgetKit renderar på systemets skärm. Det är viktigt att WidgetKit inte stödjer anpassade storlekar — endast tre fasta, vilket garanterar enhetligheten i gränssnittet.

Konfigurera storlekar via WidgetConfiguration

struct WeatherWidget: Widget {
    let kind: String = "WeatherWidget"
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            WeatherWidgetView(entry: entry)
        }
        .configurationDisplayName("Weather")
        .description("Current temperature and forecast")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

Widget-konfigurationstyper: Static och Intent

WidgetKit erbjuder två konfigurationstyper — StaticConfiguration och IntentConfiguration. StaticConfiguration är lämplig för widgets som visar samma innehåll för alla användare: valutakurser, väder, kalender. IntentConfiguration låter användaren anpassa widgeten när den läggs till via Siri-intentsystemet — till exempel välja en specifik stad för väder eller en specifik ticker för aktiekursen.

IntentConfiguration använder INWidgetIntent — en underklass av INIntent från SiriKit. När användaren lägger till en widget och väljer parametrar (t.ex. stad) sparar systemet denna intent och överför den till TimelineProvider vid varje uppdatering. Leverantören tar emot intenten i getTimeline-metoden och använder dess parametrar för att generera innehåll. IntentConfiguration är den föredragna metoden för personaliserade widgets eftersom den integreras med Siri och Shortcuts.

IntentConfiguration med parameterval

struct WeatherWidgetEntryView: View {
    var entry: WeatherEntry
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(entry.cityName)
                .font(.caption)
                .foregroundColor(.secondary)
            Text("\(entry.temperature)°C")
                .font(.largeTitle)
        }
    }
}

struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        IntentConfiguration(
            kind: "WeatherWidget",
            intent: WeatherConfigIntent.self,
            provider: WeatherTimelineProvider()
        ) { entry in
            WeatherWidgetEntryView(entry: entry)
        }
    }
}

Skapa en widget i SwiftUI: steg-för-steg-exempel

Att skapa en widget börjar med att lägga till Widget Extension Target i Xcode: File → New → Target → Widget Extension. Xcode genererar automatiskt en struktur med TimelineEntry, TimelineProvider och WidgetConfiguration. Utvecklaren behöver bara implementera SwiftUI-vyn för att visa data och konfigurera leverantören för ett korrekt uppdateringsschema.

Nedan — ett komplett exempel på en enkel widget för att visa aktuellt bitcoinpris: Provider laddar priset via URLSession och skapar en Timeline med uppdatering varje timme. WidgetSwiftUIView visar priset med stor teckenstorlek och tiden för senaste uppdatering med liten teckenstorlek.

struct BTCPriceEntry: TimelineEntry {
    let date: Date
    let price: Double
    let change24h: Double
}

struct BTCWidgetEntryView: View {
    var entry: BTCPriceEntry
    
    var body: some View {
        VStack {
            Text("BTC/USD").font(.caption)
            Text("$\(entry.price, specifier: "%.0f")")
                .font(.title2).fontWeight(.bold)
            Text(entry.change24h > 0 ? "+" : "")
        }
    }
}

Widgets för låsskärm iOS 16+

Från och med iOS 16 har WidgetKit utökat stödet till Lock Screen — låsskärmen på iPhone. Lock Screen-widgets finns i två typer: inline (en textrad under klockan) och rectangular (rektangulärt område). Till skillnad från Home Screen-widgets uppdateras Lock Screen-widgets oftare — systemutlösaren möjliggör uppdatering var 15–30:e minut för att visa aktuell information utan att låsa upp telefonen.

Lock Screen-widgets kräver separat konfiguration via WidgetConfiguration med accessoryFamilies: accessoryCircular, accessoryRectangular, accessoryInline. Dessa familjer har strikta begränsningar i storlek och innehåll — de stödjer inte bilder, animation och anpassade typsnitt. Apple rekommenderar att endast använda textinformation och systemikoner SF Symbols för Lock Screen-widgets.

• accessoryCircular — kompakt rund widget för platsen under klockan
• accessoryRectangular — rektangulär widget för området ovanför klockan
• accessoryInline — enradig text under tiden, minimal storlek
• Begränsningar: endast text, SF Symbols, övergångar; inga bilder och video

Bästa praxis och begränsningar för WidgetKit

När du utvecklar widgets är det viktigt att ta hänsyn till begränsningarna i WidgetKit. Widgets är skrivskyddade vyer: de bearbetar inte beröringshändelser (förutom tryck som öppnar appen). Widgets stödjer inte animering, video, tangentbordsinmatning, rullning eller interaktiva element. Varje widget är en statisk ögonblicksbild av data vid en given tidpunkt, och ett försök att lägga till interaktivitet kommer att leda till att appen avvisas i App Store.

Bästa praxis inkluderar Widget Center för tvångsuppdatering, cachning av data på TimelineProvider-nivå för snabb respons och användning av placeholder för initialt tillstånd. Det är också viktigt att stödja flera storlekar — användaren förväntar sig att widgeten ska vara tillgänglig i både small- och medium-varianter. Undvik noga att visa felaktiga eller föråldrade data — användaren kommer ihåg felaktig information från widgeten länge.

WidgetKit-begränsningar i tabell