0Pricing
Jetpack Compose Academy · درس

الأشرطة السفلية وأزرار الإجراءات العائمة

ثبّت التنقل والإجراءات الأساسية

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

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

Anchoring the Bottom

The thumb-friendly zone of a phone is the bottom. Scaffold's bottomBar and floatingActionButton slots put your key controls right where fingers reach. 👍

The bottomBar Slot

Whatever you place in the bottomBar slot is pinned to the bottom, and Scaffold shrinks the content area so nothing slides behind it.

Scaffold(
    bottomBar = { BottomAppBar { Text("Tools") } }
) { p -> }

BottomAppBar

BottomAppBar is a Material container for actions tied to the current screen, like edit or share buttons. It is a RowScope, so children flow left to right.

Meet the FAB

A FloatingActionButton is the round, raised button for the single most important action on a screen, like Add or Compose. ➕

FloatingActionButton(onClick = { }) {
    Icon(Icons.Default.Add, "Add")
}

The FAB Slot

Put your FAB in Scaffold's floatingActionButton slot, not in your content. Scaffold then floats it correctly above the bottom edge.

Scaffold(
    floatingActionButton = { FloatingActionButton(onClick = {}) {} }
) { p -> }

One FAB Per Screen

A FAB signals the primary action, so use just one per screen. Two competing FABs leave users unsure which one really matters.

FAB Position

Control where the FAB sits with floatingActionButtonPosition. The default is the bottom-right corner, but Center pairs nicely with a bottom bar.

floatingActionButtonPosition = FabPosition.Center

FAB Sizes

Beyond the standard FAB, Material 3 adds SmallFloatingActionButton and LargeFloatingActionButton so you can match the button to the screen's weight.

The ExtendedFAB

An ExtendedFloatingActionButton shows an icon plus a text label. It works well when the action's name is not obvious from an icon alone.

ExtendedFloatingActionButton(
    onClick = { },
    icon = { Icon(Icons.Default.Add, "Add") },
    text = { Text("New") }
)

Bars and FAB Together

Scaffold understands when a bottomBar and a FAB coexist, lifting the FAB so it never overlaps the bar. You just fill both slots.

Describe the FAB

Like any icon button, give the FAB's Icon a contentDescription. A bare plus sign means nothing to a screen reader without it.

Quick Check

How many FloatingActionButtons should a single screen normally show?

Recap

Use the bottomBar slot for screen actions and the floatingActionButton slot for one primary action. Scaffold spaces them so they never collide. ✨

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

هل درس «الأشرطة السفلية وأزرار الإجراءات العائمة» مجاني؟

نعم — نص درس «الأشرطة السفلية وأزرار الإجراءات العائمة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 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. ‏Scaffold: الهيكل الأساسي للشاشة
  2. ‏TopAppBar وأيقونات الإجراءات
  3. الأشرطة السفلية وأزرار الإجراءات العائمة
  4. ‏Snackbars وSnackbarHostState
← العودة إلى Jetpack Compose Academy