Jetpack Compose Academy · درس

تشريح دالة @Composable

اقرأ Composable وحدّد ما يجعلها مميزة

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

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

What Is a Composable?

A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱

The @Composable Annotation

The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.

@Composable
fun Greeting() {
    Text("Hello!")
}

Name It Like a UI Piece

By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.

It Returns Unit

A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.

Built-In Composables

Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.

@Composable
fun Welcome() {
    Text("Welcome to Compose")
}

Parameters Pass In Data

Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name)
}

The Modifier Parameter

Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.

Composables Call Composables

A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.

Keep Them Small

Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.

Prefer No Side Effects

A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.

Compose Builds a Tree

As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.

Quick Check

Let's verify what marks a function as a UI builder.

Recap: The Composable

A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.

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

هل درس «تشريح دالة @Composable» مجاني؟

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

ماذا ستتعلم في «تشريح دالة @Composable»؟

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

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

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

كم من الوقت يستغرق درس «تشريح دالة @Composable»؟

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

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

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

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

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