Jetpack Compose Academy · درس

كتابة دالة @Composable

عرّف دالة واجهة مستخدم قابلة لإعادة الاستخدام من إنشائك

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

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

What You Will Build

In this lesson you will write your own Composable from scratch. By the end, you can describe a piece of UI with a single Kotlin function. 🚀

It Starts With @Composable

A Composable is just a function marked with the @Composable annotation. That tag tells Compose this function emits UI instead of returning a value.

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

Name It Like a Type

Composables that emit UI use PascalCase names, like a class. So you write Greeting, not greeting, to signal it is a UI building block.

They Return Unit

Your Composable does not return a value. It emits UI by calling other Composables inside it, so its return type is simply Unit.

@Composable
fun Welcome() {
    Text("Welcome aboard")
}

Pass Data With Parameters

Make a Composable reusable by adding parameters. Pass in a name and the same function can greet anyone you like.

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

Default Values Help

Give parameters defaults so callers can skip them. Here name defaults to World, so Greeting() still works on its own.

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

Built-in Composables

You rarely start from nothing. Compose ships ready-made pieces like Text, Button, and Image that you call from inside your own function.

Import What You Use

When you call Text, Android Studio adds an import for androidx.compose.material3.Text. Let the IDE auto-import so you never guess the package.

Keep Functions Small

Each Composable should describe one clear thing. A small focused function is easier to read, reuse, and preview than a giant one.

No Return, Just Calls

Inside a Composable you do not build and return a widget. You simply call other Composables top to bottom, and Compose draws them in order.

@Composable
fun Card() {
    Text("Title")
    Text("Subtitle")
}

It Is Still Kotlin

A Composable is normal Kotlin underneath. You can use variables, conditions, and loops inside it just like any other function.

@Composable
fun Status(online: Boolean) {
    if (online) Text("Online")
    else Text("Offline")
}

Quick Check

Time for a quick check on what defines a Composable.

Recap

You can now write a Composable: tag it with @Composable, name it in PascalCase, take parameters, and call other Composables to emit UI. 🎉

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

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

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

ماذا ستتعلم في «كتابة دالة @Composable»؟

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

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

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

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

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

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

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

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

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