Canvas ใน Xcode — คืออะไร ตัวแก้ไข SwiftUI และการทำงานกับตัวอย่าง

Canvas ใน Xcode คืออะไร

Canvas คือตัวแก้ไขตัวอย่างในตัวของ Xcode เปิดตัวครั้งแรกใน Xcode 11 พร้อมกับ SwiftUI อยู่ในแผงด้านขวาของตัวแก้ไขถัดจากโค้ด และแสดงตัวอย่างสดของ SwiftUI View ปัจจุบัน Canvas ทำงานแบบเรียลไทม์: การเปลี่ยนแปลงโค้ดทุกครั้งจะสะท้อนในตัวอย่างทันทีโดยไม่ต้องคอมไพล์ใหม่ด้วยตนเอง

ในเชิงสถาปัตยกรรม Canvas คือกระบวนการแยกต่างหาก (Preview Provider Extension) ที่ Xcode เริ่มต้นเมื่อเปิด Canvas กระบวนการจะโหลด PreviewProvider ที่คอมไพล์แล้ว เรนเดอร์ผลลัพธ์ผ่าน Metal และแสดงในแผงตัวแก้ไข หากไม่ได้ใช้งาน PreviewProvider Canvas จะแสดงข้อความ “Preview paused — No preview provider found”

อินเทอร์เฟซของ Canvas

อินเทอร์เฟซของ Canvas ประกอบด้วยแถบเครื่องมือพร้อมตัวเลือกการเลือกอุปกรณ์ การวางแนว โทนสี และมาตราส่วน ปุ่ม Live Preview, Selectable และ Embed In Diagram เปลี่ยนโหมดการโต้ตอบ Canvas รองรับการแบ่งหน้าจอ: คุณสามารถเปิด Canvas หลายตัวสำหรับไฟล์ต่างๆ ในพื้นที่ทำงานเดียวกัน

Canvas แบบโต้ตอบทำงานอย่างไร

Live Preview คือฟีเจอร์สำคัญของ Canvas ที่ทำให้ตัวอย่างโต้ตอบได้ ในโหมดนี้ Canvas จะเรนเดอร์ View ในกระบวนการแยกต่างหากและส่งท่าทาง (แตะ ปัด เลื่อน) กลับไปยังรันไทม์ SwiftUI ผู้ใช้สามารถกดปุ่ม กรอกข้อความในฟิลด์ และทดสอบการนำทางโดยไม่ต้องเปิดโปรแกรมจำลอง

SwiftUI ประมวลผลท่าทางใน Canvas ผ่านระบบเหตุการณ์เดียวกันกับบนอุปกรณ์จริง ความแตกต่างอยู่ที่ประสิทธิภาพ: Canvas ใช้การเรนเดอร์ซอฟต์แวร์ผ่าน Metal ในขณะที่โปรแกรมจำลองใช้กราฟิกของโฮสต์ ซึ่งหมายความว่าแอนิเมชันที่ซับซ้อนใน Canvas อาจทำงานช้าลงหรือแตกต่างทางสายตา

กระบวนการอัปเดต Canvas

การอัปเดต Canvas เกิดขึ้นในสามขั้นตอน ขั้นแรก Xcode ตรวจพบการเปลี่ยนแปลงไฟล์และคอมไพล์เฉพาะ PreviewProvider ที่เปลี่ยนแปลงแบบเพิ่มหน่วย จากนั้นโมดูลไบนารีใหม่จะถูกโหลดเข้าสู่กระบวนการ PreviewProviderExtension สุดท้าย SwiftUI จะสร้าง View ขึ้นมาใหม่และเรนเดอร์ผ่าน Metal ทั้งวงจรใช้เวลา 0.5–2 วินาทีขึ้นอยู่กับความซับซ้อนของ View

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("Tapped \(count) times") {
            count += 1
        }
        .buttonStyle(.borderedProminent)
    }
}

struct TappableButton_Previews: PreviewProvider {
    static var previews: some View {
        TappableButton()
    }
}

การโต้ตอบ: เมื่อ Live Preview ทำงาน ปุ่มใน Canvas จะทำงานเหมือนปุ่มจริง — ตัวนับเพิ่มขึ้นทุกครั้งที่แตะ และแสดงแอนิเมชันการกด ซึ่งช่วยให้ทดสอบตรรกะของปุ่มได้โดยไม่ต้องใช้โปรแกรมจำลอง

การตั้งค่า Canvas

การตั้งค่าพื้นฐาน ของ Canvas สามารถเข้าถึงได้ผ่านเมนู Editor → Canvas หรือผ่านปุ่มบนแถบเครื่องมือ Canvas ตัวเลือกหลักประกอบด้วยการเลือกอุปกรณ์ การวางแนว ธีมมืด และมาตราส่วน Dynamic Type สำหรับการตั้งค่าถาวร ให้ใช้ตัวปรับแต่ง PreviewProvider ในโค้ด

การตั้งค่าขั้นสูง รวมถึง: Auto Activate Preview — เปิด Canvas อัตโนมัติเมื่อเปิดไฟล์ SwiftUI; Live Preview — โหมดท่าทาง; Draw Live Edges — แสดงขอบเขตของวิว; Show Preview Sizes — ขนาดพื้นที่ตัวอย่าง Xcode เก็บการตั้งค่าเหล่านี้แบบพกพาในไฟล์พื้นที่ทำงาน/โปรเจกต์

การกำหนดค่าผ่าน PreviewProvider

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

struct SettingsView_Previews: PreviewProvider {
    static var previews: some View {
        SettingsView()
            .previewDevice("iPhone 16 Pro")
            .previewLayout(.device)
            .preferredColorScheme(.dark)
            .dynamicTypeSize(.xxxLarge)
            .previewDisplayName("Dark + XL Text")
    }
}

previewLayout ที่ใช้ .device จะแสดงหน้าจออุปกรณ์เต็มรูปแบบ ในขณะที่ .sizeThatFits แสดงตัวอย่างขนาดกะทัดรัดที่ปรับขนาดตามเนื้อหา สำหรับวิดเจ็ตและส่วนประกอบขนาดเล็ก ให้ใช้ .sizeThatFits — ช่วยประหยัดพื้นที่ในตัวแก้ไข

ตัวอย่างการทำงานกับ Canvas

ตัวอย่างที่ 1: การทดสอบความสามารถในการปรับ ใช้ ForEach กับอุปกรณ์หลายเครื่องและโทนสีเพื่อให้แน่ใจว่าอินเทอร์เฟซดูดีบนหน้าจอทั้งหมด Canvas อัปเดตตัวอย่างทั้งหมดพร้อมกัน ช่วยให้สังเกตปัญหาการจัดวางก่อนเปิดโปรแกรมจำลอง

ตัวอย่างที่ 2: ตัวอย่างพร้อมข้อมูล สำหรับ Views ที่แสดงเนื้อหาแบบไดนามิก (รายการ โปรไฟล์ การ์ด) ให้สร้างอินสแตนซ์หลายตัวพร้อมข้อมูลต่างกันในตัวอย่าง วิธีนี้เร็วกว่าการสลับระหว่างหน้าจอในโปรแกรมจำลองและป้อนข้อมูล

ตัวอย่างพร้อมสถานะต่างๆ

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

struct LoadingStateView: View {
    let state: LoadingState
    
    var body: some View {
        switch state {
        case .loading:
            ProgressView()
        case .loaded(let items):
            List(items, id: \.self) { Text($0) }
        case .error(let message):
            Text(message).foregroundColor(.red)
        }
    }
}

struct LoadingStateView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            LoadingStateView(state: .loading)
                .previewDisplayName("Loading")
            LoadingStateView(state: .loaded(["Item 1", "Item 2"]))
                .previewDisplayName("Loaded")
            LoadingStateView(state: .error("Failed to load"))
                .previewDisplayName("Error")
        }
    }
}

Canvas กับ โปรแกรมจำลอง — เปรียบเทียบ

Canvas และโปรแกรมจำลอง เสริมซึ่งกันและกัน ไม่ใช่แทนที่กัน Canvas เหมาะสำหรับการทำซ้ำอย่างรวดเร็วระหว่างการจัดวาง: แก้ไขโค้ดพร้อมรับคำติชมทันที โปรแกรมจำลองจำเป็นสำหรับการตรวจสอบขั้นสุดท้าย: ประสิทธิภาพจริง ท่าทางที่กำหนดเอง การแจ้งเตือนระบบ และการรวมกับฟังก์ชันฮาร์ดแวร์ (กล้อง, เซ็นเซอร์)

ตาม WWDC 2024 Apple วางตำแหน่ง Canvas เป็นเครื่องมือสำหรับการพัฒนาในระยะแรก และโปรแกรมจำลองสำหรับการทดสอบการรวมระบบ แนะนำให้ใช้เวลา 60% ของการพัฒนา UI ใน Canvas และ 40% — ทดสอบบนโปรแกรมจำลองหรืออุปกรณ์

คำแนะนำ: ออกแบบใน Canvas ทดสอบบนโปรแกรมจำลอง ใช้ Live Preview สำหรับตรรกะท่าทางของปุ่มและการนำทาง แต่การทดสอบขั้นสุดท้ายของแอนิเมชัน คำขอเครือข่าย และฟังก์ชันฮาร์ดแวร์ควรทำบนโปรแกรมจำลองหรืออุปกรณ์จริง

เคล็ดลับการทำงานกับ Canvas

เคล็ดลับ 1: ใช้โหมดเลือก ในโหมดเลือก (ไอคอนเคอร์เซอร์) คุณสามารถคลิกที่องค์ประกอบใดๆ ในตัวอย่างและดูลำดับชั้น ตัวปรับแต่ง และเฟรมในตัวตรวจสอบ ซึ่งมีประโยชน์สำหรับการดีบักการจัดวาง: คุณจะเห็น padding, offset และขนาดขององค์ประกอบทันทีโดยไม่ต้องพิมพ์

เคล็ดลับ 2: Embed In Diagram Canvas สามารถจัดกลุ่มองค์ประกอบ: เลือกสอง Views ขึ้นไป คลิก Embed In Diagram — Canvas จะสร้าง VStack/HStack/ZStack และสร้างโค้ดใหม่โดยอัตโนมัติ ซึ่งช่วยเร่งการสร้างลำดับชั้นที่ซับซ้อนโดยไม่ต้องพิมพ์วงเล็บด้วยตนเอง

เคล็ดลับ 3: ล้างแคชตัวอย่าง Canvas หาก Canvas หยุดอัปเดต ให้ล้าง Product → Preview Cache Xcode จะลบไบนารี PreviewProvider ที่แคชไว้และสร้างใหม่จากศูนย์ ซึ่งแก้ปัญหา 90% ของปัญหา Canvas ค้าง

การเพิ่มประสิทธิภาพความเร็ว Canvas

Canvas ช้า มักเกิดจากจำนวนตัวอย่างที่มากเกินไป สำหรับ Views ที่ซับซ้อน ให้ใช้เพียงตัวอย่างเดียวแทนกลุ่มละ 6–8 ตัว ปิด Live Preview สำหรับ Views ที่ไม่มีท่าทาง — โหมดคงที่จะเรนเดอร์เร็วกว่า ตรวจสอบให้แน่ใจว่า PreviewProvider ใช้ข้อมูลจำลองแทนคำขอเครือข่ายจริง

// Quick debug: minimal preview
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // compact mode
    }
}

previewLayout(.sizeThatFits) เป็นโหมดที่เร็วที่สุดของ Canvas เพราะเรนเดอร์เฉพาะเนื้อหา View โดยไม่มีขอบอุปกรณ์ ใช้สำหรับการจัดวางประจำวัน เปิด .device เฉพาะเมื่อตรวจสอบขั้นสุดท้าย