Swift Academy · Lektion

Ein WidgetKit-Widget erstellen

Erstellen Sie ein Widget für den Home-Bildschirm mit einer Timeline.

Ein WidgetKit-Widget erstellen ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ein Widget ist

Ein Widget ist eine kleine, auf einen Blick erfassbare Ansicht auf dem Home-Bildschirm, Sperrbildschirm oder in StandBy. Es ist keine Mini-App – es kann weder scrollen noch beliebigen Code ausführen. Es zeigt eine Momentaufnahme von Daten an, die das System nach einem Zeitplan aktualisiert, den Sie über WidgetKit vorgeben.

import WidgetKit
import SwiftUI
// A widget = configuration + timeline of entries
// + a SwiftUI view that renders one entry

Das Widget-Extension-Target

Widgets werden in einem separaten Widget Extension-Target ausgeliefert, nicht in der Haupt-App. Es verfügt über ein eigenes Bundle und wird in einem eigenen Prozess ausgeführt. Sie fügen es über die Xcode-Vorlage für eine Widget Extension hinzu, die Konfiguration und Provider als Ausgangspunkt erstellt.

import WidgetKit
// File > New > Target > Widget Extension
// The extension declares one or more widgets
// in a WidgetBundle if you have several.

Der Widget-Typ

Ein Widget entspricht dem Widget-Protokoll und stellt einen body bereit, der eine Konfiguration zurückgibt. Die Konfiguration verknüpft eine kind-Kennung, einen Timeline-provider und die view, die jeden Eintrag rendert.

import WidgetKit
import SwiftUI
struct WeatherWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: "WeatherWidget",
            provider: WeatherProvider()) { entry in
            WeatherView(entry: entry)
        }
        .configurationDisplayName("Weather")
        .description("Shows the current forecast.")
    }
}

Statische vs. AppIntent-Konfiguration

StaticConfiguration ist für Widgets ohne Benutzeroptionen vorgesehen. Mit AppIntentConfiguration können Benutzer das Widget über einen App Intent anpassen, etwa eine Stadt oder ein Konto auswählen. Verwenden Sie für feste Inhalte die statische Variante und für konfigurierbare Widgets die intentbasierte Variante.

import WidgetKit
// StaticConfiguration     -> no user choices
// AppIntentConfiguration  -> user-editable parameters
let kinds = "static vs configurable"
_ = kinds

Der Timeline-Eintrag

Jeder Zeitpunkt, den das Widget anzeigen kann, ist ein TimelineEntry – eine Struktur mit einem date-Wert und allen weiteren Daten, die Ihre Ansicht benötigt. Der Provider stellt eine Folge solcher Einträge bereit.

import WidgetKit
struct WeatherEntry: TimelineEntry {
    let date: Date
    let temperature: Int
    let condition: String
}

Die Widget-Ansicht

Die Ansicht besteht aus gewöhnlichem SwiftUI, unterliegt aber Einschränkungen: kein Scrollen, nur begrenzte Interaktivität und eine korrekte Darstellung bei mehreren festen Größen. Lesen Sie den Eintrag und gestalten Sie eine übersichtliche Zusammenfassung, die sich auf einen Blick erfassen lässt.

import SwiftUI
import WidgetKit
struct WeatherView: View {
    let entry: WeatherEntry
    var body: some View {
        VStack {
            Text(entry.condition)
            Text("\(entry.temperature) degrees")
                .font(.title)
        }
    }
}

Unterstützte Widget-Familien

Geben Sie mit supportedFamilies an, welche Größen Sie unterstützen: .systemSmall, .systemMedium, .systemLarge, die Sperrbildschirm-Varianten .accessoryRectangular/.accessoryCircular und weitere. Passen Sie das Layout für jede Familie mithilfe der Umgebung für die Widget-Familie an.

import WidgetKit
import SwiftUI
// .configurationDisplayName(...)
// .supportedFamilies([.systemSmall, .systemMedium,
//                     .accessoryRectangular])
let families = "declare supported sizes"
_ = families

An die Widget-Familie anpassen

Lesen Sie innerhalb der Ansicht @Environment(\.widgetFamily) aus, um zwischen Layouts zu unterscheiden – etwa zwischen einem kompakten kleinen Widget und einem umfangreicheren mittleren Widget –, ohne separate Widgets schreiben zu müssen.

import SwiftUI
import WidgetKit
struct AdaptiveView: View {
    @Environment(\.widgetFamily) var family
    let entry: WeatherEntry
    var body: some View {
        if family == .systemSmall {
            Text("\(entry.temperature)")
        } else {
            Text("\(entry.condition) \(entry.temperature)")
        }
    }
}

Hintergrund des Containers

Moderne Widgets müssen ihren Hintergrund mit containerBackground(for: .widget) deklarieren, damit das System sie in verschiedenen Kontexten wie StandBy und auf dem Sperrbildschirm korrekt darstellen kann. Ohne diese Angabe wird das Widget möglicherweise abgelehnt oder falsch dargestellt.

import SwiftUI
import WidgetKit
struct Bg: View {
    var body: some View {
        Text("Hi")
            .containerBackground(for: .widget) {
                Color.blue
            }
    }
}

Daten mit der App teilen

Der Widget-Prozess ist separat und kann daher nicht auf den In-Memory-Zustand der App zugreifen. Teilen Sie Daten über eine App Group – einen gemeinsamen Container, auf den beide Targets zugreifen können –, normalerweise über eine gemeinsame UserDefaults-Suite oder eine Datei im Gruppencontainer.

import Foundation
let shared = UserDefaults(
    suiteName: "group.com.example.app")
// App writes; widget reads the same suite.
_ = shared

Das Widget neu laden

Wenn sich die Daten der App ändern, weisen Sie WidgetKit durch den Aufruf von WidgetCenter.shared.reloadTimelines(ofKind:) (oder reloadAllTimelines()) an, eine Aktualisierung vorzunehmen. Dadurch wird das System angestoßen, Ihren Provider nach einer neuen Timeline zu fragen.

import WidgetKit
func refreshWidget() {
    WidgetCenter.shared.reloadTimelines(
        ofKind: "WeatherWidget")
}

Schnelltest

Rufen Sie sich ins Gedächtnis, wie ein Widget Daten mit seiner Host-App teilt.

Zusammenfassung

Sie haben ein WidgetKit-Widget erstellt:

Widgets befinden sich in einer separaten Extension, entsprechen dem Widget-Protokoll und geben eine WidgetConfiguration zurück.
Verwenden Sie StaticConfiguration oder AppIntentConfiguration, einen TimelineEntry und eine eingeschränkte SwiftUI-Ansicht.
Deklarieren Sie supportedFamilies, passen Sie das Widget über widgetFamily an und fügen Sie einen containerBackground hinzu.
Teilen Sie Daten über eine App Group und aktualisieren Sie das Widget mit WidgetCenter.reloadTimelines.

Häufig gestellte Fragen

Ist die Lektion „Ein WidgetKit-Widget erstellen“ kostenlos?

Ja — der vollständige Text von „Ein WidgetKit-Widget erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Ein WidgetKit-Widget erstellen“?

Erstellen Sie ein Widget für den Home-Bildschirm mit einer Timeline. Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Ein WidgetKit-Widget erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Swift Academy