Jetpack Compose Academy · درس

أزرار Text وOutlined وIcon

اختر نوع الزر المناسب للمهمة

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

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

Buttons Have Personalities

Not every action deserves a bold filled button. Compose offers several button variants, each signaling a different level of emphasis. 🎨

The Filled Button

The standard Button is filled and high-emphasis. It draws the eye, so save it for the one primary action per screen.

Button(onClick = { pay() }) {
    Text("Pay now")
}

OutlinedButton for Secondary

An OutlinedButton has just a border and no fill. It reads as a clear-but-secondary choice sitting next to a filled one.

OutlinedButton(onClick = { cancel() }) {
    Text("Cancel")
}

TextButton for Low Emphasis

A TextButton shows only a label, no border or fill. It is perfect for quiet actions like Learn more or dialog choices.

TextButton(onClick = { dismiss() }) {
    Text("Not now")
}

Emphasis Is a Hierarchy

Think of it as a ladder of emphasis: filled is loudest, outlined is medium, text is quietest. Match the variant to the action's weight.

Icons Inside Buttons

Any button can hold an Icon plus a label in its content row. Add a small spacer so the icon and text do not touch.

Button(onClick = { add() }) {
    Icon(Icons.Default.Add, null)
    Spacer(Modifier.width(8.dp))
    Text("Add")
}

The IconButton

An IconButton is a compact, label-free tap target holding just one icon. It is ideal for toolbars and app-bar actions.

IconButton(onClick = { share() }) {
    Icon(Icons.Default.Share, "Share")
}

Always Describe Your Icon

Give an icon-only button a contentDescription so screen readers can announce it. A null description hides it from accessibility.

IconButton(onClick = { favorite() }) {
    Icon(Icons.Default.Favorite, "Favorite")
}

FilledIconButton for Emphasis

Need an icon button that stands out? FilledIconButton adds a solid background, raising its emphasis above the plain version.

FilledIconButton(onClick = { record() }) {
    Icon(Icons.Default.Mic, "Record")
}

Pick the Right Variant

Choosing well guides users: filled for Confirm, outlined for an alternative, text for dismiss, IconButton for tight spaces.

Same onClick, Different Look

Every variant shares the same onClick contract. You change only the visual weight, never how you wire up the action.

Quick Check

You want a quiet, low-emphasis action with only a label and no border or fill.

Recap: Right Tool, Right Tap

You now have a toolbox: filled Button, OutlinedButton, TextButton, and IconButton. Match emphasis to the action and label your icons. ✨

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

هل درس «أزرار Text وOutlined وIcon» مجاني؟

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

ماذا ستتعلم في «أزرار Text وOutlined وIcon»؟

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

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

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

كم من الوقت يستغرق درس «أزرار Text وOutlined وIcon»؟

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

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

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

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

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