Jetpack Compose Academy · درس

بناء عدّاد للنقرات

اربط الحالة بزر للحصول على تحديثات مباشرة

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

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

Our Goal

Let's build a tiny tap counter: a number on screen and a button that increases it with every tap. 🙂

Start With the State

First declare the state that will change. The counter starts at zero and lives inside the Composable for now.

var count by remember { mutableStateOf(0) }

Show the Count

Read the state in a Text so it always displays the current value. Reading it here subscribes the Text to changes.

Text("Count: " + count)

Add the Button

A Button needs an onClick action. Inside it we will change the state, which is what makes the UI react.

Button(onClick = { }) {
    Text("Tap me")
}

Increment on Tap

In onClick, bump the counter. Changing the state tells Compose to recompose anything that reads count.

Button(onClick = { count++ }) {
    Text("Tap me")
}

Stack Them in a Column

Place the text above the button using a Column, which lays out its children vertically, top to bottom.

Column {
    Text("Count: " + count)
    Button(onClick = { count++ }) { Text("Tap me") }
}

How the Loop Works

Tap fires onClick, count changes, Compose recomposes the Text, and you instantly see the new number. That is the full cycle.

Add a Reset Button

Want a fresh start? Add a second button whose onClick sets count back to zero. Reset is just another state change.

Button(onClick = { count = 0 }) {
    Text("Reset")
}

React to the Value

Because the UI is a function of state, you can style it from count, like showing a message once it passes ten taps.

if (count > 10) Text("Wow, keep going!")

Wrap It in a Function

Put everything in a reusable Composable named TapCounter. Now you can drop your counter anywhere in the app.

@Composable
fun TapCounter() {
    var count by remember { mutableStateOf(0) }
}

You Built Interactivity

That simple loop of state to UI to event to state is the heart of every interactive Compose screen you will ever write.

Quick Check

What makes the displayed number update after a tap?

Recap

You wired state to a Text and a Button to build a live tap counter, your first truly interactive Compose screen. Great work! 🎉

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

هل درس «بناء عدّاد للنقرات» مجاني؟

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

ماذا ستتعلم في «بناء عدّاد للنقرات»؟

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

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

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

كم من الوقت يستغرق درس «بناء عدّاد للنقرات»؟

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

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

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

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

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