استخراج Composables قابلة لإعادة الاستخدام
أعد هيكلة الشاشة إلى مكونات منظمة
استخراج Composables قابلة لإعادة الاستخدام درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Time to Refactor
Your card works, but it is one long function. Now you will split it into small, named Composables that are easier to read and reuse. 🧩
Spot Repeated Patterns
The three stat blocks are nearly identical. Repeated shapes like that are a strong signal to extract a single reusable Composable.
Extract StatBlock
Pull one stat into its own function. Pass the differing values, the count and label, in as parameters.
@Composable
fun StatBlock(count: String, label: String) {
Column { Text(count); Text(label) }
}Reuse It Three Times
Now the stats Row is just three clean calls. The same StatBlock renders different data each time, with zero duplication.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Extract the Header
Group the avatar, name, and bio into a ProfileHeader Composable. The big screen function gets shorter and far easier to scan.
@Composable
fun ProfileHeader(name: String, bio: String) {
Column { /* avatar, name, bio */ }
}Name Things Clearly
Good Composable names describe what you see: ProfileHeader, StatBlock, FollowButton. Clear names make the card read like a sentence.
Pass Data In
Keep components flexible by accepting parameters instead of hard-coding values. The same ProfileHeader can show any user.
ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")Hoist the Click Out
Let the parent decide what a tap does. Expose an onFollowClick lambda parameter so FollowButton stays generic.
@Composable
fun FollowButton(onClick: () -> Unit) {
Button(onClick = onClick) { Text("Follow") }
}Assemble the Screen
The top-level ProfileCard now just composes the pieces in order. Each child Composable owns one job, which is the Compose way.
Column {
ProfileHeader(name, bio)
StatsRow(stats)
FollowButton(onFollow)
}Add a Modifier Parameter
Truly reusable Composables accept a Modifier parameter, defaulting to Modifier. Callers can then size and pad them from outside.
@Composable
fun StatBlock(
count: String,
label: String,
modifier: Modifier = Modifier
) { /* ... */ }Clean and Reusable
Your one giant function is now several small, focused, reusable Composables. This structure scales as your app grows in complexity. 🎉
Quick Check
What makes a Composable reusable across different data?
Recap: You Shipped a Card
You refactored the profile card into small reusable Composables with parameters and a Modifier slot. You now have a clean, scalable screen built end to end.
تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «استخراج Composables قابلة لإعادة الاستخدام» مجاني؟
نعم — نص درس «استخراج Composables قابلة لإعادة الاستخدام» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «استخراج Composables قابلة لإعادة الاستخدام»؟
أعد هيكلة الشاشة إلى مكونات منظمة تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «استخراج Composables قابلة لإعادة الاستخدام»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- رسم تخطيط بطاقة الملف الشخصي
- قسم الصورة الرمزية والاسم والنبذة
- صف الإحصاءات وزر المتابعة
- استخراج Composables قابلة لإعادة الاستخدام