Jetpack Compose Academy · درس

تمييز المسار المحدد

زامن التحديد مع مكدس الرجوع

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

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

Selection Must Be Real

A tab should light up because of where the user actually is, not a value you set by hand. The back stack is your source of truth. 🧭

Read the Current Entry

Ask the NavController for the live currentBackStackEntryAsState. It updates automatically every time navigation changes.

val entry by navController.currentBackStackEntryAsState()

Get the Active Route

From that entry you read the active route string off its destination. That string tells you which tab is showing.

val route = entry?.destination?.route

Compare to Mark Selected

Now set each item selected by comparing the active route to that tab route. The match becomes the highlighted selected tab.

selected = route == tab.route

Hierarchy Beats Equality

For nested graphs, exact equality can miss. Checking the destination hierarchy marks a tab active even on its sub-screens.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Navigate on Tap

In onClick, call navController.navigate with the tab route to move there. The selection then follows the back stack on its own.

onClick = { navController.navigate(tab.route) }

Avoid Stacking Copies

Tapping a tab repeatedly should not pile up screens. Use launchSingleTop so only one copy of a destination stays on top.

navController.navigate(tab.route) {
  launchSingleTop = true
}

Pop to the Start

Pressing back from any tab should return to your home tab, not walk every tab you visited. popUpTo the start destination fixes that.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Tint the Active Tab

NavigationBarItem auto-tints the selected item, but you can theme it with colors so the active tab matches your brand.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Label Visibility

Use alwaysShowLabel to decide if unselected tabs still show text. Showing only the active label is a common clean look.

alwaysShowLabel = false

One Reactive Loop

Put it together: read the route once, then in your forEach compare each tab to it. Selection now mirrors navigation perfectly.

Quick Check

You wired selection to the back stack. One quick question.

Recap

You synced highlighting to the back stack: read the current route, compare per tab, navigate with launchSingleTop and popUpTo. Selection now stays honest. 🎯

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

هل درس «تمييز المسار المحدد» مجاني؟

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

ماذا ستتعلم في «تمييز المسار المحدد»؟

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

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

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

كم من الوقت يستغرق درس «تمييز المسار المحدد»؟

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

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

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

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

‏NavigationBar بعلامات تبويب متعددة
تمييز المسار المحدد
الحفاظ على حالة علامات التبويب عند التبديل
‏TabRow والصفحات القابلة للسحب

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