0Pricing
Jetpack Compose Academy · درس

رسم تخطيط بطاقة الملف الشخصي

خطّط للبنية قبل كتابة التعليمات البرمجية

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

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

Why Sketch First

Before you write a single line, picture the screen. A quick sketch turns a vague idea into a clear plan you can build with confidence. 📝

What a Profile Card Holds

Your profile card shows a few key things: an avatar, a name, a short bio, some stats, and a follow button. That list is your content inventory.

Think in Boxes

Compose lays things out as nested boxes. Each piece of content lives in its own region, and regions nest inside larger ones. Start by drawing those boxes.

Top to Bottom Flow

Most cards read vertically: avatar on top, name below, bio under that. A Column stacks children top to bottom, so it will be your outer container.

Sketch the Outer Column

The whole card sits inside one Column. Everything you add becomes a child of it, in the order you write them.

Column {
    // avatar
    // name
    // bio
    // stats row
    // follow button
}

Side-by-Side Stats

The stats line shows counts next to each other, not stacked. Anything that sits horizontally belongs in a Row nested inside your Column.

Plan the Stats Row

Sketch a Row holding three little blocks: posts, followers, and following. Each block is its own tiny piece of the card.

Row {
    // posts
    // followers
    // following
}

Where the Button Lives

The follow button is the last item, full width at the bottom. In your sketch it sits as the final child of the outer Column.

Name the Sections

Give each region a name: header, bio, stats, action. Naming sections now makes turning the sketch into Composables almost automatic later. ✨

Spacing and Breathing Room

A good sketch marks the gaps too. Note where you want padding around the card and space between sections so it never feels cramped.

From Sketch to Tree

Your sketch maps directly to a Composable tree: outer Column, then header, bio, stats Row, and button as children in order.

Quick Check

Which container best fits items that should sit side by side?

Recap: You Have a Plan

You sketched the card as nested boxes: an outer Column with a header, bio, a stats Row, and a follow button. Next you will turn that plan into real Composables.

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

هل درس «رسم تخطيط بطاقة الملف الشخصي» مجاني؟

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

ماذا ستتعلم في «رسم تخطيط بطاقة الملف الشخصي»؟

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

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

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

كم من الوقت يستغرق درس «رسم تخطيط بطاقة الملف الشخصي»؟

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

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

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

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

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