Swift Academy · Lekcja

Tworzenie widżetu WidgetKit

Utwórz widżet ekranu początkowego z osią czasu.

Tworzenie widżetu WidgetKit to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.

Czym jest widżet

Widżet to mały widok, który można szybko sprawdzić i który znajduje się na ekranie początkowym, ekranie blokady lub w trybie StandBy. Nie jest to miniaplikacja — nie może przewijać zawartości ani wykonywać dowolnego kodu. Wyświetla migawkę danych, którą system odświeża zgodnie z harmonogramem przekazanym przez Państwa za pośrednictwem WidgetKit.

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

Cel Widget Extension

Widżety są dostarczane w osobnym celu Widget Extension, a nie w głównej aplikacji. Mają własny bundle i działają we własnym procesie. Dodaje się je za pomocą szablonu Widget Extension w Xcode, który tworzy podstawową konfigurację i provider.

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

Typ widżetu

Widżet jest zgodny z protokołem Widget i udostępnia właściwość body, która zwraca konfigurację. Konfiguracja łączy identyfikator kind, provider osi czasu oraz widok renderujący każdy wpis.

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

Konfiguracja Static vs AppIntent

StaticConfiguration służy do widżetów bez opcji użytkownika. AppIntentConfiguration pozwala użytkownikom dostosować widżet (wybrać miasto lub konto) za pomocą App Intent. Należy wybrać konfigurację statyczną dla stałej treści, a opartą na intencji dla widżetów konfigurowalnych.

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

Wpis osi czasu

Każdy moment, który widżet może wyświetlić, jest wpisem typu TimelineEntry — strukturą zawierającą date oraz dowolne dane potrzebne widokowi. Provider dostarcza sekwencję takich wpisów.

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

Widok widżetu

Widok jest zwykłym widokiem SwiftUI, ale podlega ograniczeniom: nie może przewijać zawartości, ma ograniczoną interaktywność i musi dobrze wyglądać w kilku określonych rozmiarach. Należy odczytać wpis i ułożyć przejrzyste podsumowanie, które można szybko sprawdzić.

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

Obsługiwane rodziny

Obsługiwane rozmiary należy zadeklarować za pomocą supportedFamilies: .systemSmall, .systemMedium, .systemLarge, rozmiary ekranu blokady .accessoryRectangular/.accessoryCircular i inne. Układ należy dostosować do każdej rodziny za pomocą środowiska rodziny widżetu.

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

Dostosowanie do rodziny

W widoku należy odczytać @Environment(\.widgetFamily), aby rozgałęziać układy — na przykład zastosować kompaktowy układ małego widżetu lub bogatszy układ średniego widżetu — bez tworzenia osobnych widżetów.

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)")
        }
    }
}

Tło kontenera

Nowoczesne widżety muszą deklarować swoje tło za pomocą containerBackground(for: .widget), aby system mógł poprawnie renderować je w różnych kontekstach, takich jak StandBy i ekran blokady. W przeciwnym razie widżet może zostać odrzucony lub wyglądać nieprawidłowo.

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

Udostępnianie danych aplikacji

Proces widżetu jest oddzielny, dlatego nie może odczytywać stanu aplikacji przechowywanego w pamięci. Dane należy udostępniać za pośrednictwem App Group — wspólnego kontenera dostępnego dla obu celów — zazwyczaj za pomocą współdzielonego zestawu UserDefaults lub pliku w kontenerze grupy.

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

Ponowne ładowanie widżetu

Gdy dane aplikacji ulegną zmianie, należy poinformować WidgetKit o konieczności odświeżenia, wywołując WidgetCenter.shared.reloadTimelines(ofKind:) (lub reloadAllTimelines()). W ten sposób system otrzymuje sygnał, aby poprosić Państwa providera o aktualną oś czasu.

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

Szybkie sprawdzenie

Proszę przypomnieć sobie, w jaki sposób widżet udostępnia dane swojej aplikacji hostującej.

Podsumowanie

Zbudowali Państwo widżet WidgetKit:

Widżety znajdują się w osobnym rozszerzeniu i są zgodne z protokołem Widget, zwracając obiekt WidgetConfiguration.
Należy użyć StaticConfiguration lub AppIntentConfiguration, obiektu TimelineEntry oraz widoku SwiftUI podlegającego ograniczeniom.
Należy zadeklarować supportedFamilies, dostosować widok za pomocą widgetFamily i dodać containerBackground.
Dane należy udostępniać za pośrednictwem App Group, a widżet odświeżać za pomocą WidgetCenter.reloadTimelines.

Często zadawane pytania

Czy lekcja „Tworzenie widżetu WidgetKit” jest bezpłatna?

Tak — pełny tekst „Tworzenie widżetu WidgetKit” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Tworzenie widżetu WidgetKit”?

Utwórz widżet ekranu początkowego z osią czasu. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Swift Academy?

Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Tworzenie widżetu WidgetKit”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?

Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Swift Academy