NavController وNavHost
حدّد مخطط التنقل في تطبيقك
NavController وNavHost درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Moving Between Screens
Real apps have many screens. Navigation Compose is the official library that lets you move between them without juggling fragments or activities. 🧭
Add the Dependency
Navigation lives in its own artifact. Add androidx.navigation:navigation-compose to your module's build file before you can use any of it.
dependencies {
implementation("androidx.navigation:navigation-compose:2.7.7")
}Meet the NavController
The NavController is the brain of navigation. It tracks where you are, remembers history, and carries out every move you ask for.
Remember the Controller
You create one with rememberNavController() so it survives recomposition. Make it once near the top of your app and pass it down.
val navController = rememberNavController()Meet the NavHost
The NavHost is the container that swaps screens in and out. It shows exactly one destination at a time, based on the controller.
Wire Host to Controller
A NavHost needs two things: the navController that drives it and a startDestination that says which screen to show first.
NavHost(
navController = navController,
startDestination = "home"
) { }The startDestination
The startDestination is the route shown when the app opens. It is also the screen users land on after the back stack empties.
Declaring Destinations
Inside the NavHost lambda you list your screens with composable("route"). Each one ties a route name to the UI it should show.
NavHost(navController, startDestination = "home") {
composable("home") { HomeScreen() }
composable("profile") { ProfileScreen() }
}Navigate by Route
To change screens, call navController.navigate("route"). The host sees the request and swaps in the matching destination instantly.
Button(onClick = { navController.navigate("profile") }) {
Text("Open profile")
}One Controller, One Host
Keep a single NavController paired with a single NavHost for an app's main flow. Sharing one source of truth avoids confusing, out-of-sync history.
Why Routes Are Strings
Routes are just String identifiers, like tiny URLs inside your app. This keeps destinations decoupled and easy to link later.
Quick Check
Which piece actually performs the screen change?
Recap
You met the duo behind navigation: the NavController drives moves and history, while the NavHost shows one destination at a time from your route list. 🎉
الأسئلة الشائعة
هل درس «NavController وNavHost» مجاني؟
نعم — نص درس «NavController وNavHost» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «NavController وNavHost»؟
حدّد مخطط التنقل في تطبيقك تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «NavController وNavHost»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- NavController وNavHost
- وجهات Composable والمسارات
- تمرير الوسائط بين الشاشات
- مكدس الرجوع والروابط العميقة