0Pricing
Jetpack Compose Academy · درس

صف الإحصاءات وزر المتابعة

أضف تفاصيل تفاعلية إلى البطاقة

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

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

Add the Interactive Details

With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡

One Stat Block

Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("128")
    Text("Posts")
}

Emphasize the Number

The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.

Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)

Put Stats in a Row

Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

Space the Stats Evenly

Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }

Add the Follow Button

Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.

Button(onClick = { /* follow */ }) {
    Text("Follow")
}

Make It Full Width

A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.

Button(
    onClick = { /* follow */ },
    modifier = Modifier.fillMaxWidth()
) { Text("Follow") }

Track the Follow State

The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.

var following by remember { mutableStateOf(false) }

Flip State on Tap

Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.

Button(onClick = { following = !following }) {
    Text(if (following) "Following" else "Follow")
}

Wire It Into the Card

Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.

An Interactive Card

You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉

Quick Check

What lets the button text update when tapped?

Recap: Stats and Action

You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.

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

هل درس «صف الإحصاءات وزر المتابعة» مجاني؟

نعم — نص درس «صف الإحصاءات وزر المتابعة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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 يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

  1. رسم تخطيط بطاقة الملف الشخصي
  2. قسم الصورة الرمزية والاسم والنبذة
  3. صف الإحصاءات وزر المتابعة
  4. استخراج Composables قابلة لإعادة الاستخدام
← العودة إلى Jetpack Compose Academy