PricingLoginStart free
Swift Academy · Leçon

Créer un widget avec WidgetKit

Créez un widget pour l’écran d’accueil avec une chronologie.

Leçon 1 sur 413 étapes

Créer un widget avec WidgetKit est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.

Qu’est-ce qu’un widget

Un widget est une petite vue consultable en un coup d’œil, qui se trouve sur l’écran d’accueil, l’écran verrouillé ou dans StandBy. Ce n’est pas une mini-application : il ne peut ni défiler ni exécuter du code arbitraire. Il affiche un instantané des données que le système actualise selon une planification que vous fournissez avec WidgetKit.

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

La cible d’extension de widget

Les widgets sont fournis dans une cible d’extension distincte, et non dans l’application principale. Elle possède son propre paquet et s’exécute dans son propre processus. Vous l’ajoutez avec le modèle d’extension de widget d’Xcode, qui prépare la configuration et le fournisseur.

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

Le type de widget

Un widget adopte le protocole Widget et expose un body qui renvoie une configuration. La configuration rassemble un identifiant de type kind, un fournisseur de chronologie et la vue qui affiche chaque entrée.

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

Configuration statique ou par intention d’app

StaticConfiguration convient aux widgets sans options utilisateur. AppIntentConfiguration permet aux utilisateurs de personnaliser le widget (choisir une ville ou un compte) au moyen d’une intention d’app. Choisissez la configuration statique pour un contenu fixe, et la configuration par intention pour les widgets configurables.

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

L’entrée de chronologie

Chaque instant auquel le widget peut être affiché est une TimelineEntry — une structure contenant une date ainsi que toutes les données dont votre vue a besoin. Le fournisseur fournit une séquence de ces entrées.

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

La vue du widget

La vue est une vue SwiftUI classique, mais soumise à des contraintes : pas de défilement, une interactivité limitée, et un rendu correct à plusieurs tailles fixes. Lisez l’entrée et composez un résumé clair, consultable en un coup d’œil.

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

Familles prises en charge

Déclarez les tailles prises en charge avec supportedFamilies : .systemSmall, .systemMedium, .systemLarge, les formats d’écran verrouillé .accessoryRectangular/.accessoryCircular, et bien d’autres. Adaptez la mise en page à chaque famille à l’aide de l’environnement de famille du widget.

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

Adapter la vue à la famille

Lisez @Environment(\.widgetFamily) dans la vue pour choisir la mise en page — un widget compact de petite taille ou un widget moyen plus riche — sans écrire de widgets distincts.

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

Arrière-plan du conteneur

Les widgets modernes doivent déclarer leur arrière-plan avec containerBackground(for: .widget) afin que le système puisse les afficher correctement dans différents contextes, comme StandBy et l’écran verrouillé. Sans cette déclaration, le widget peut être refusé ou s’afficher incorrectement.

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

Partager des données avec l’application

Le processus du widget est distinct : il ne peut donc pas lire l’état en mémoire de l’application. Partagez les données au moyen d’un groupe d’apps — un conteneur partagé auquel les deux cibles peuvent accéder — généralement une suite UserDefaults partagée ou un fichier dans le conteneur du groupe.

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

Actualiser le widget

Lorsque les données de l’application changent, demandez à WidgetKit de s’actualiser en appelant WidgetCenter.shared.reloadTimelines(ofKind:) (ou reloadAllTimelines()). Cela incite le système à demander une nouvelle chronologie à votre fournisseur.

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

Vérification rapide

Rappelez-vous comment un widget partage ses données avec l’application qui l’héberge.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez créé un widget WidgetKit :

  • Les widgets résident dans une extension distincte, adoptent Widget et renvoient une WidgetConfiguration.
  • Utilisez StaticConfiguration ou AppIntentConfiguration, une TimelineEntry et une vue SwiftUI soumise à des contraintes.
  • Déclarez supportedFamilies, adaptez la vue avec widgetFamily et ajoutez un containerBackground.
  • Partagez les données au moyen d’un groupe d’apps et actualisez-les avec WidgetCenter.reloadTimelines.
Gratuit pour commencer

Apprends Swift avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours
122
Leçons
409
Commencer gratuitementVoir le cours complet

Questions Fréquemment Posées

La leçon « Créer un widget avec WidgetKit » est-elle gratuite ?

Oui — le texte complet de « Créer un widget avec WidgetKit » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Créer un widget avec WidgetKit » ?

Créez un widget pour l’écran d’accueil avec une chronologie. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Swift Academy ?

Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Créer un widget avec WidgetKit » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?

Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Créer un widget avec WidgetKit
  2. Fournisseurs de chronologie et instantanés
  3. Présentation des extensions d’app
  4. App Intents et raccourcis
← Retour à Swift Academy