Swift Academy · บทเรียน

การสร้างวิดเจ็ตด้วย WidgetKit

สร้างวิดเจ็ตบนหน้าจอโฮมด้วยไทม์ไลน์

การสร้างวิดเจ็ตด้วย WidgetKit เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

วิดเจ็ตคืออะไร

วิดเจ็ตคือมุมมองขนาดเล็กที่ดูข้อมูลได้อย่างรวดเร็ว ซึ่งอยู่บนหน้าจอโฮม หน้าจอล็อก หรือใน StandBy วิดเจ็ตไม่ใช่แอปขนาดย่อ เพราะไม่สามารถเลื่อนดูหรือเรียกใช้โค้ดใด ๆ ได้ตามอำเภอใจ แต่จะแสดงภาพรวมข้อมูลที่ระบบรีเฟรชตามกำหนดเวลาซึ่งคุณระบุผ่าน WidgetKit

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

เป้าหมายส่วนขยายวิดเจ็ต

วิดเจ็ตจะรวมอยู่ในเป้าหมาย ส่วนขยายวิดเจ็ต แยกต่างหาก ไม่ใช่ในแอปหลัก โดยมีบันเดิลของตนเองและทำงานในกระบวนการของตนเอง คุณเพิ่มเป้าหมายนี้ผ่านเทมเพลตส่วนขยายวิดเจ็ตของ Xcode ซึ่งจะสร้างโครงเริ่มต้นสำหรับการกำหนดค่าและผู้ให้บริการให้

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

ชนิดของวิดเจ็ต

วิดเจ็ตต้องสอดคล้องกับโพรโทคอล Widget และเปิดเผย body ที่คืนค่าการกำหนดค่า การกำหนดค่านี้เชื่อมโยงตัวระบุ ชนิด ผู้ให้บริการไทม์ไลน์ และมุมมองที่ใช้แสดงผลแต่ละรายการเข้าด้วยกัน

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

การกำหนดค่าแบบคงที่เทียบกับ AppIntent

StaticConfiguration ใช้สำหรับวิดเจ็ตที่ไม่มีตัวเลือกสำหรับผู้ใช้ ส่วน AppIntentConfiguration ให้ผู้ใช้ปรับแต่งวิดเจ็ตได้ เช่น เลือกเมืองหรือบัญชี ผ่าน App Intent ให้เลือกแบบคงที่สำหรับเนื้อหาที่ไม่เปลี่ยนแปลง และเลือกแบบอิงอินเทนต์สำหรับวิดเจ็ตที่ปรับแต่งได้

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

รายการในไทม์ไลน์

แต่ละช่วงเวลาที่วิดเจ็ตสามารถแสดงได้คือ TimelineEntry ซึ่งเป็นโครงสร้างที่มี date พร้อมข้อมูลอื่น ๆ ตามที่มุมมองต้องการ ผู้ให้บริการจะส่งชุดรายการเหล่านี้มาให้

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

มุมมองวิดเจ็ต

มุมมองนี้ใช้ SwiftUI แบบปกติ แต่มีข้อจำกัด ได้แก่ ไม่สามารถเลื่อนได้ โต้ตอบได้อย่างจำกัด และต้องแสดงผลได้เหมาะสมในขนาดตายตัวหลายขนาด ให้อ่านรายการแล้วจัดวางสรุปข้อมูลที่ดูได้อย่างรวดเร็วและเป็นระเบียบ

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

รูปแบบที่รองรับ

ประกาศขนาดที่รองรับด้วย supportedFamilies: .systemSmall, .systemMedium, .systemLarge, .accessoryRectangular/.accessoryCircular สำหรับหน้าจอล็อก และอื่น ๆ ปรับการจัดวางตามแต่ละรูปแบบโดยใช้สภาพแวดล้อมของตระกูลวิดเจ็ต

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

การปรับตามรูปแบบ

อ่านค่า @Environment(\.widgetFamily) ภายในมุมมองเพื่อเลือกการจัดวางที่แตกต่างกัน เช่น วิดเจ็ตขนาดเล็กแบบกะทัดรัดเมื่อเทียบกับวิดเจ็ตขนาดกลางที่แสดงข้อมูลได้มากกว่า โดยไม่ต้องเขียนวิดเจ็ตแยกกัน

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

พื้นหลังคอนเทนเนอร์

วิดเจ็ตสมัยใหม่ต้องประกาศพื้นหลังด้วย containerBackground(for: .widget) เพื่อให้ระบบแสดงผลได้อย่างถูกต้องในบริบทต่าง ๆ เช่น StandBy และหน้าจอล็อก หากไม่ประกาศ วิดเจ็ตอาจถูกปฏิเสธหรือแสดงผลไม่ถูกต้อง

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

การแชร์ข้อมูลกับแอป

กระบวนการของวิดเจ็ตแยกจากแอป จึงไม่สามารถอ่านสถานะในหน่วยความจำของแอปได้ ให้แชร์ข้อมูลผ่านกลุ่มแอป ซึ่งเป็นคอนเทนเนอร์ที่เป้าหมายทั้งสองเข้าถึงได้ โดยทั่วไปจะใช้ชุด UserDefaults ที่แชร์ร่วมกัน หรือไฟล์ในคอนเทนเนอร์ของกลุ่ม

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

การโหลดวิดเจ็ตซ้ำ

เมื่อข้อมูลของแอปเปลี่ยนแปลง ให้เรียก WidgetCenter.shared.reloadTimelines(ofKind:) หรือ reloadAllTimelines() เพื่อแจ้งให้ WidgetKit รีเฟรช ระบบจะขอไทม์ไลน์ใหม่จากผู้ให้บริการของคุณ

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

ตรวจสอบอย่างรวดเร็ว

ทบทวนว่าวิดเจ็ตแชร์ข้อมูลกับแอปโฮสต์อย่างไร

สรุปทบทวน

คุณได้สร้างวิดเจ็ตด้วย WidgetKit แล้ว:

วิดเจ็ตอยู่ในส่วนขยายแยกต่างหากและสอดคล้องกับ Widget โดยคืนค่า WidgetConfiguration
ใช้ StaticConfiguration หรือ AppIntentConfiguration ร่วมกับ TimelineEntry และมุมมอง SwiftUI ที่มีข้อจำกัด
ประกาศ supportedFamilies ปรับตาม widgetFamily และเพิ่ม containerBackground
แชร์ข้อมูลผ่านกลุ่มแอปและรีเฟรชด้วย WidgetCenter.reloadTimelines

คำถามที่พบบ่อย

บทเรียน “การสร้างวิดเจ็ตด้วย WidgetKit” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างวิดเจ็ตด้วย WidgetKit” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างวิดเจ็ตด้วย WidgetKit”

สร้างวิดเจ็ตบนหน้าจอโฮมด้วยไทม์ไลน์ คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างวิดเจ็ตด้วย WidgetKit” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Swift Academy