Canvas trong Xcode — nó là gì, trình chỉnh sửa SwiftUI và làm việc với bản xem trước

Canvas trong Xcode là gì?

Canvas là trình chỉnh sửa xem trước tích hợp trong Xcode, lần đầu tiên được giới thiệu trong Xcode 11 cùng với SwiftUI. Nó nằm ở bảng điều khiển bên phải của trình chỉnh sửa cạnh mã và hiển thị bản xem trước trực tiếp của SwiftUI View hiện tại. Canvas hoạt động theo thời gian thực: mọi thay đổi trong mã đều được phản ánh ngay lập tức trong bản xem trước mà không cần biên dịch lại thủ công.

Về mặt kiến trúc, Canvas là một quy trình riêng biệt (Preview Provider Extension) mà Xcode khởi chạy khi mở Canvas. Quy trình này tải PreviewProvider đã biên dịch, kết xuất kết quả qua Metal và hiển thị trong bảng điều khiển trình chỉnh sửa. Nếu PreviewProvider không được triển khai, Canvas hiển thị văn bản giữ chỗ “Preview paused — No preview provider found”.

Giao diện Canvas

Giao diện Canvas bao gồm thanh công cụ với các tùy chọn chọn thiết bị, hướng, bảng màu và tỷ lệ. Các nút Live Preview, Selectable và Embed In Diagram chuyển đổi chế độ tương tác. Canvas hỗ trợ chế độ xem chia nhỏ: bạn có thể mở nhiều Canvas cho các tệp khác nhau trong cùng một không gian làm việc.

Canvas tương tác hoạt động như thế nào

Live Preview là tính năng chính của Canvas giúp các bản xem trước trở nên tương tác. Ở chế độ này, Canvas kết xuất View trong một quy trình riêng biệt và truyền các cử chỉ (chạm, vuốt, cuộn) trở lại thời gian chạy SwiftUI. Người dùng có thể nhấn nút, điền vào trường văn bản và kiểm tra điều hướng mà không cần khởi chạy trình mô phỏng.

SwiftUI xử lý các cử chỉ trong Canvas thông qua cùng hệ thống sự kiện như trên thiết bị thực. Sự khác biệt nằm ở hiệu suất: Canvas sử dụng kết xuất phần mềm qua Metal, trong khi trình mô phỏng sử dụng đồ họa máy chủ. Điều này có nghĩa là các hoạt ảnh phức tạp trong Canvas có thể chạy chậm hơn hoặc trông khác biệt về mặt hình ảnh.

Quy trình cập nhật Canvas

Cập nhật Canvas diễn ra theo ba giai đoạn. Đầu tiên, Xcode phát hiện thay đổi tệp và biên dịch gia tăng chỉ PreviewProvider đã thay đổi. Sau đó, mô-đun nhị phân mới được tải vào quy trình PreviewProviderExtension. Cuối cùng, SwiftUI tạo lại View và kết xuất nó qua Metal. Toàn bộ chu kỳ mất 0,5–2 giây tùy thuộc vào độ phức tạp của 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()
    }
}

Tương tác: khi Live Preview đang chạy, nút trong Canvas hoạt động như nút thật — bộ đếm tăng sau mỗi lần chạm và hoạt ảnh nhấn được hiển thị. Điều này cho phép kiểm tra logic nút mà không cần trình mô phỏng.

Thiết lập Canvas

Cài đặt cơ bản của Canvas có sẵn qua menu Editor → Canvas hoặc qua các nút trên thanh công cụ Canvas. Các tùy chọn chính bao gồm chọn thiết bị, hướng, chủ đề tối và tỷ lệ Dynamic Type. Đối với cài đặt cố định, hãy sử dụng các bổ ngữ PreviewProvider trong mã.

Cài đặt nâng cao bao gồm: Auto Activate Preview — tự động kích hoạt Canvas khi mở tệp SwiftUI; Live Preview — chế độ cử chỉ; Draw Live Edges — hiển thị ranh giới view; Show Preview Sizes — kích thước vùng xem trước. Xcode lưu các cài đặt này một cách di động trong các tệp không gian làm việc/dự án.

Cấu hình qua PreviewProvider

Cấu hình lập trình cho phép kiểm soát Canvas chính xác hơn. Các bổ ngữ được áp dụng trong bản xem trước ghi đè cài đặt thanh công cụ và được lưu trong mã — tất cả thành viên nhóm đều thấy chúng qua 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 với .device hiển thị toàn bộ màn hình thiết bị, trong khi .sizeThatFits hiển thị bản xem trước nhỏ gọn với kích thước phù hợp với nội dung. Đối với widget và thành phần nhỏ, hãy sử dụng .sizeThatFits — nó tiết kiệm không gian trong trình chỉnh sửa.

Ví dụ làm việc với Canvas

Ví dụ 1: kiểm tra khả năng thích ứng. Sử dụng ForEach với nhiều thiết bị và bảng màu để đảm bảo giao diện hiển thị tốt trên tất cả các màn hình. Canvas cập nhật tất cả bản xem trước cùng lúc, cho phép phát hiện vấn đề bố cục trước khi khởi chạy trình mô phỏng.

Ví dụ 2: xem trước với dữ liệu. Đối với Views hiển thị nội dung động (danh sách, hồ sơ, thẻ), hãy tạo nhiều phiên bản với dữ liệu khác nhau trong bản xem trước. Cách này nhanh hơn so với chuyển đổi giữa các màn hình trong trình mô phỏng và nhập dữ liệu.

Xem trước với các trạng thái khác nhau

Nhóm bản xem trước qua Group hoặc ForEach cho phép hiển thị tất cả trạng thái thành phần trên một bảng điều khiển. Đối với danh sách, điều này đặc biệt tiện lợi: danh sách trống, đang tải, lỗi và danh sách có dữ liệu đều hiển thị cùng lúc.

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 vs Trình mô phỏng — so sánh

Canvas và Trình mô phỏng bổ sung cho nhau, thay vì thay thế lẫn nhau. Canvas lý tưởng cho việc lặp lại nhanh trong quá trình bố cục: chỉnh sửa mã với phản hồi tức thì. Trình mô phỏng cần thiết cho việc xác minh cuối cùng: hiệu suất thực tế, cử chỉ tùy chỉnh, cảnh báo hệ thống và tích hợp với các chức năng phần cứng (camera, cảm biến).

Theo WWDC 2024, Apple định vị Canvas là công cụ cho giai đoạn phát triển ban đầu và Trình mô phỏng cho kiểm thử tích hợp. Khuyến nghị dành 60% thời gian phát triển UI trong Canvas và 40% — kiểm tra trên trình mô phỏng hoặc thiết bị.

Khuyến nghị: thiết kế trong Canvas, kiểm tra trên trình mô phỏng. Sử dụng Live Preview cho logic cử chỉ của nút và điều hướng, nhưng kiểm tra cuối cùng về hoạt ảnh, yêu cầu mạng và chức năng phần cứng nên thực hiện trên trình mô phỏng hoặc thiết bị thực.

Mẹo làm việc với Canvas

Mẹo 1: sử dụng chế độ chọn. Ở chế độ chọn (biểu tượng con trỏ), bạn có thể nhấp vào bất kỳ thành phần nào trong bản xem trước và xem cấu trúc phân cấp, bổ ngữ và khung của nó trong trình kiểm tra. Điều này hữu ích để gỡ lỗi bố cục: bạn thấy ngay lập tức padding, offset và kích thước thành phần mà không cần in.

Mẹo 2: Embed In Diagram. Canvas có thể nhóm các thành phần: chọn hai hoặc nhiều Views, nhấp vào Embed In Diagram — Canvas sẽ tạo VStack/HStack/ZStack và tự động xây dựng lại mã. Điều này tăng tốc độ tạo cấu trúc phân cấp phức tạp mà không cần nhập dấu ngoặc thủ công.

Mẹo 3: xóa bộ nhớ đệm xem trước của Canvas. Nếu Canvas ngừng cập nhật, hãy xóa Product → Preview Cache. Xcode sẽ xóa các tệp nhị phân PreviewProvider đã lưu trong bộ nhớ đệm và xây dựng lại chúng từ đầu. Điều này giải quyết 90% vấn đề Canvas bị treo.

Tối ưu hóa tốc độ Canvas

Canvas chậm thường do số lượng bản xem trước quá nhiều. Đối với Views phức tạp, chỉ sử dụng một bản xem trước thay vì một nhóm 6–8 bản. Tắt Live Preview cho Views không có cử chỉ — chế độ tĩnh kết xuất nhanh hơn. Đảm bảo PreviewProvider sử dụng dữ liệu mô phỏng thay vì yêu cầu mạng thực.

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

previewLayout(.sizeThatFits) là chế độ nhanh nhất của Canvas vì nó chỉ kết xuất nội dung View mà không có viền thiết bị. Sử dụng chế độ này cho công việc bố cục hàng ngày, chỉ bật .device khi kiểm tra cuối cùng.