إعداد NavHost
حدّد مخطط تنقّل في Compose
إعداد NavHost درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.
التنقل بين الشاشات
تحتوي معظم التطبيقات على أكثر من شاشة واحدة. تتيح لك مكتبة Navigation Compose التنقل بين شاشات composable مع الحفاظ على مكدس الرجوع.
التبعية
أضف مكتبة التنقل إلى ملف Gradle، ثم ستحصل على NavController وNavHost والمساعدات.
// build.gradle (module)
implementation("androidx.navigation:navigation-compose:2.7.0")NavController
إن NavController هو الكائن الذي ينفّذ التنقل ويتذكر مكدس الرجوع. أنشئه باستخدام rememberNavController().
val navController = rememberNavController()NavHost
إن NavHost عبارة عن composable تعرض الوجهة الحالية. وهي تحتاج إلى المتحكم ومسار startDestination.
NavHost(
navController = navController,
startDestination = "home"
) {
// destinations go here
}تعريف الوجهات
داخل lambda الخاصة بـ NavHost، صرّح عن كل شاشة باستخدام composable("route"). وتمثل السلسلة النصية مسار الوجهة.
composable("home") {
HomeScreen()
}المسارات سلاسل نصية
المسار هو معرّف نصي فريد لوجهة، يشبه مسار URL. تتنقل باستخدام المسار، ويعرض NavHost الـ composable المطابقة له.
مخطط من شاشتين
إليك مخطط تنقل بسيطًا يتضمن وجهتين. تظهر "home" أولًا لأنها قيمة startDestination.
NavHost(navController, startDestination = "home") {
composable("home") { HomeScreen() }
composable("details") { DetailsScreen() }
}startDestination
إن startDestination هي أول شاشة يراها المستخدم وجذر مكدس الرجوع. ولا يمكن للتطبيق الرجوع إلى ما قبلها.
تمرير المتحكم إلى الأسفل
تحتاج الشاشات التي تطلق التنقل إلى NavController. مرّره كمعامل، أو الأفضل من ذلك، مرّر lambdas بسيطة مثل onContinue للحفاظ على قابلية إعادة استخدام الشاشات.
composable("home") {
HomeScreen(onOpenDetails = {
navController.navigate("details")
})
}NavHost واحد لكل مساحة
عادةً ما يكون لديك NavHost واحد في أعلى التطبيق. ويُنشأ المتحكم مرة واحدة باستخدام rememberNavController() وتتم مشاركته بين الوجهات.
تجميع العناصر معًا
إعداد كامل: المتحكم والمضيف ووجهتان.
@Composable
fun App() {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "home"
) {
composable("home") { HomeScreen() }
composable("details") { DetailsScreen() }
}
}تحقق سريع
أي كائن يتذكر مكدس الرجوع وينفّذ التنقل؟
مراجعة
إعداد التنقل:
- تنشئ
rememberNavController()المتحكم. - يعرض
NavHostالوجهات ويحتاج إلىstartDestination. - صرّح عن الشاشات باستخدام
composable("route")؛ فالمسارات سلاسل نصية فريدة.
الأسئلة الشائعة
هل درس «إعداد NavHost» مجاني؟
نعم — نص درس «إعداد NavHost» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.
ماذا ستتعلم في «إعداد NavHost»؟
حدّد مخطط تنقّل في Compose تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟
لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «إعداد NavHost»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟
نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعداد NavHost
- التنقّل بين الشاشات
- تمرير الوسائط
- التنقّل السفلي