Jetpack Compose Academy · درس

المعاينات المباشرة باستخدام @Preview

طوّر واجهة المستخدم دون إعادة بناء التطبيق بأكمله

المعاينات المباشرة باستخدام @Preview درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

See UI Without Running

Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡

Add the Annotation

Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.

@Preview
@Composable
fun GreetingPreview() {
    Greeting("Compose")
}

Previews Need No Arguments

A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.

Wrap Your Real Composable

Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.

@Preview
@Composable
fun CardPreview() {
    ProfileCard(name = "Ada")
}

Name It With a Title

Add name to label the preview in the panel. Helpful when one file shows several previews at once.

@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }

Show System Decorations

Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.

@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }

Just the Background

If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.

@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }

Many Previews at Once

Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.

Preview Different Sizes

Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.

@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }

Interactive Preview

Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.

Previews Stay Out of the App

Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.

Quick Check

A quick check on how previews work.

Recap

You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨

الأسئلة الشائعة

هل درس «المعاينات المباشرة باستخدام @Preview» مجاني؟

نعم — نص درس «المعاينات المباشرة باستخدام @Preview» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «المعاينات المباشرة باستخدام @Preview»؟

طوّر واجهة المستخدم دون إعادة بناء التطبيق بأكمله تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «المعاينات المباشرة باستخدام @Preview»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy