Swift Academy · Pelajaran

Membangun WidgetKit Widget

Buat widget layar utama dengan linimasa.

Membangun WidgetKit Widget adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Apa Itu Widget

Widget adalah tampilan kecil yang dapat dilihat sekilas dan berada di Layar Utama, Layar Kunci, atau StandBy. Widget bukan aplikasi mini—widget tidak dapat menggulir atau menjalankan kode sembarang. Widget menampilkan snapshot data yang disegarkan sistem berdasarkan jadwal yang Anda berikan melalui WidgetKit.

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

Target Ekstensi Widget

Widget dikirimkan dalam target Ekstensi Widget terpisah, bukan di aplikasi utama. Widget memiliki bundel sendiri dan berjalan dalam prosesnya sendiri. Anda menambahkannya melalui templat Ekstensi Widget di Xcode, yang menyiapkan konfigurasi dan penyedia.

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

Tipe Widget

Widget menerapkan protokol Widget dan menyediakan body yang mengembalikan konfigurasi. Konfigurasi tersebut menghubungkan pengenal jenis, penyedia timeline, dan tampilan yang merender setiap entry.

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

Konfigurasi Statis vs AppIntent

StaticConfiguration digunakan untuk widget tanpa opsi pengguna. AppIntentConfiguration memungkinkan pengguna menyesuaikan widget, misalnya memilih kota atau akun, melalui Tindakan Aplikasi. Pilih konfigurasi statis untuk content tetap dan konfigurasi berbasis tindakan untuk widget yang dapat dikonfigurasi.

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

Entri Timeline

Setiap titik waktu yang dapat ditampilkan widget disebut TimelineEntry—sebuah struktur dengan date serta data apa pun yang diperlukan tampilan Anda. Penyedia memasok urutan entries ini.

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

Tampilan Widget

Tampilannya menggunakan SwiftUI biasa, tetapi memiliki batasan: tidak boleh menggulir, interaktivitasnya terbatas, dan tampilannya harus sesuai pada beberapa ukuran tetap. Baca entry lalu susun ringkasan yang bersih dan mudah dilihat sekilas.

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

Ukuran yang Didukung

Nyatakan ukuran yang Anda dukung dengan supportedFamilies: .systemSmall, .systemMedium, .systemLarge, .accessoryRectangular/.accessoryCircular untuk Layar Kunci, dan lainnya. Sesuaikan tata letak untuk setiap family menggunakan lingkungan family widget.

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

Menyesuaikan dengan Family

Baca @Environment(\.widgetFamily) di dalam tampilan untuk membedakan tata letak—widget kecil yang ringkas dibandingkan widget medium yang lebih lengkap—tanpa menulis widget terpisah.

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

Latar Belakang Wadah

Widget modern harus menyatakan latar belakangnya dengan containerBackground(for: .widget) agar sistem dapat merendernya dengan benar di berbagai konteks seperti StandBy dan Layar Kunci. Tanpa deklarasi ini, widget dapat ditolak atau tampilannya keliru.

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

Berbagi Data dengan Aplikasi

Proses widget terpisah, sehingga tidak dapat membaca status dalam memori aplikasi. Bagikan data melalui Grup Aplikasi—wadah bersama yang dapat diakses oleh kedua target—biasanya melalui rangkaian UserDefaults bersama atau berkas dalam wadah grup.

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

Memuat Ulang Widget

Saat data aplikasi berubah, beri tahu WidgetKit untuk menyegarkannya dengan memanggil WidgetCenter.shared.reloadTimelines(ofKind:) atau reloadAllTimelines(). Tindakan ini mendorong sistem untuk meminta timeline baru dari penyedia Anda.

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

Pemeriksaan Singkat

Ingat kembali cara widget berbagi data dengan aplikasi induknya.

Ringkasan

Anda telah membuat widget WidgetKit:

Widget berada dalam ekstensi terpisah dan menerapkan Widget, yang mengembalikan WidgetConfiguration.
Gunakan StaticConfiguration atau AppIntentConfiguration, sebuah TimelineEntry, dan tampilan SwiftUI dengan batasan tertentu.
Nyatakan supportedFamilies, sesuaikan melalui widgetFamily, dan tambahkan containerBackground.
Bagikan data melalui Grup Aplikasi dan segarkan dengan WidgetCenter.reloadTimelines.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membangun WidgetKit Widget” gratis?

Ya — teks lengkap “Membangun WidgetKit Widget” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membangun WidgetKit Widget”?

Buat widget layar utama dengan linimasa. Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Membangun WidgetKit Widget” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy