کانواس در 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 از split-view پشتیبانی می‌کند: می‌توان چند Canvas برای فایل‌های مختلف در یک محیط کار باز کرد.

Canvas تعاملی چگونه کار می‌کند

Live Preview — قابلیت کلیدی Canvas است که پیش‌نمایش را تعاملی می‌کند. در این حالت، Canvas View را در یک فرآیند جداگانه رندر کرده و اشارات (لمس، کشیدن، پیمایش) را به رانتایم SwiftUI برمی‌گرداند. کاربر می‌تواند بدون اجرای شبیه‌ساز روی دکمه‌ها کلیک کرده، فیلدهای متنی را پر کرده و پیمایش را آزمایش کند.

SwiftUI اشارات در Canvas را از طریق همان سیستم رویدادی که در دستگاه واقعی است پردازش می‌کند. تفاوت در عملکرد: Canvas از رندر نرم‌افزاری از طریق Metal استفاده می‌کند، در حالی که شبیه‌ساز از گرافیک میزبان استفاده می‌کند. این به آن معنی است که انیمیش‌های پیچیده در Canvas ممکن است کندتر باشند یا از نظر دیداری متفاوت باشند.

فرآیند به‌روزرسانی Canvas

به‌روزرسانی Canvas در سه مرحله انجام می‌شود. ابتدا Xcode تغییر فایل را تشخیص داده و تنها PreviewProvider تغییریافته را به صورت افزایشی کامپایل می‌کند. سپس ماژول دودویی جدید در فرآیند PreviewProviderExtension بارگیری می‌شود. در نهایت، SwiftUI View را مجدداً ایجاد کرده و آن را از طریق Metal رندر می‌کند. کل چرخه بسته به پیچیدگی View حدود 0.5–2 ثانیه طول می‌کشد.

struct TappableButton: View {
    @State private var count = 0
    
    var body: some View {
        Button("\(count) بار لمس شد") {
            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 این تنظیمات را به صورت قابل حمل در فایل‌های workspace/پروژه ذخیره می‌کند.

تنظیم از طریق PreviewProvider

تنظیم نرم‌افزاری کنترل دقیق‌تری بر روی Canvas فراهم می‌کند. مودیفکاتورهای اعمال‌شده در previews تنظیمات پانل ابزار را لغو کرده و در کد ذخیره می‌شوند — تمام اعضای تیم آنها را از طریق 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 همه پیش‌نمایش‌ها را به طور همزمان به‌روز می‌کند و به شما اجازه می‌دهد مشکلات layout را قبل از اجرای شبیه‌ساز مشاهده کنید.

نمونه 2: پیش‌نمایش با داده. برای View‌هایی که محتوای دینامیک را نمایش می‌دهند (فهرست‌ها، پروفایل‌ها، کارت‌ها)، چند نمونه با داده‌های مختلف در previews ایجاد کنید. این از تغییر بین صفحات در شبیه‌ساز و ورود داده سریع‌تر است.

پیش‌نمایش با حالت‌های مختلف

گروه پیش‌نمایش از طریق 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 در مقابل Simulator — مقایسه

Canvas و Simulator یکدیگر را تکمیل می‌کنند، جایگزین نمی‌شوند. Canvas برای ایتراسیون سریع در طراحی ایدهال است: ویرایش کد با بازخورد فوری. Simulator برای بررسی نهایی ضروری است: عملکرد واقعی، اشارات سفارشی، اطلاع‌رسانی‌های سیستمی و یکپارچگی با قابلیت‌های سخت‌افزاری (دوربین، حسگرها).

بر اساس WWDC 2024، Apple Canvas را به عنوان ابزاری برای طراحان در مراحل اولیه و Simulator را برای مرحله آزمایش یکپارچگی معرفی می‌کند. 60% زمان توسعه UI در Canvas و 40% در شبیه‌ساز یا دستگاه واقعی توصیه می‌شود.

توصیه: طراحی را در Canvas انجام دهید، آزمایش را در شبیه‌ساز. از Live Preview برای منطق اشارات دکمه‌ها و ناوبری استفاده کنید، اما بررسی نهایی انیمیشن‌ها، درخواست‌های شبکه و قابلیت‌های سخت‌افزاری را در شبیه‌ساز یا دستگاه واقعی انجام دهید.

نکاتی برای کار با Canvas

نکته 1: از حالت Selectable استفاده کنید. در حالت Selectable (آیکون ماوس)، می‌توان روی هر عنصر پیش‌نمایش کلیک کرده و سلسله‌مراتب، مودیفکاتورها و اندازه آن را در بازرس مشاهده کرد. این برای دباگ layout مفید است: شما بلافاصله padding، offset و اندازه عنصر را بدون چاپ مشاهده می‌کنید.

نکته 2: Embed In Diagram. Canvas می‌تواند عناصر را گروه‌بندی کند: دو View یا بیشتر را انتخاب کرده، روی Embed In Diagram کلیک کنید — Canvas VStack/HStack/ZStack ایجاد کرده و کد را خودکار بازنویسی می‌کند. این ایجاد سلسله‌مراتب پیچیده را بدون ورود دستی پرانتز سریع می‌کند.

نکته 3: پاک کردن کش Canvas. اگر Canvas از به‌روزرسانی باز ایساد، Product → Preview Cache را پاک کنید. Xcode فایل‌های دودویی PreviewProvider ذخیره‌شده را حذف کرده و آنها را از نو می‌سازد. این 90% مشکلات Canvas قفزکرده را حل می‌کند.

بهینه‌سازی سرعت Canvas

Canvas کند معمولاً ناشی از تعداد زیاد پیش‌نمایش‌هاست. برای View‌های پیچیده تنها از یک پیش‌نمایش استفاده کنید، نه گروه 6–8 تایی. Live Preview را برای View‌های بدون اشاره خاموش کنید — حالت استاتیک سریع‌تر رندر می‌شود. اطمینان حاصل کنید که PreviewProvider از mock داده‌ها استفاده می‌کند نه درخواست‌های واقعی شبکه.

// اشکال‌زدایی سریع: پیش‌نمایش حداقل
struct ComplexView_Previews: PreviewProvider {
    static var previews: some View {
        ComplexView()
            .previewLayout(.sizeThatFits) // حالت فشرده
    }
}

previewLayout(.sizeThatFits) — سریع‌ترین حالت Canvas است، زیرا تنها محتوای View بدون قاب دستگاه رندر می‌شود. از آن برای کار روزمره استفاده کنید، .device را تنها برای بررسی نهایی فعال کنید.