يقدّم مكوّن التنقّل في Android Jetpack دعمًا لتطبيقات Jetpack Compose. يمكنك التنقّل بين العناصر القابلة للتجميع مع الاستفادة من البنية الأساسية لعنصر التنقّل و ميزاته.
توضّح هذه الصفحة الاختلافات مع Jetpack Navigation في Compose لنظام التشغيل Wear.
ضبط إعدادات الجهاز
استخدِم التبعية التالية في ملف build.gradle الخاص بوحدة تطبيقك:
Kotlin
dependencies { def wear_compose_version = "1.4.1" implementation "androidx.wear.compose:compose-navigation:$wear_compose_version" }
يتم استخدام هذا العنصر بدلاً من العنصر androidx.navigation:navigation-compose
لأنّه يقدّم عمليات تنفيذ بديلة خاصة بنظام التشغيل Wear OS.
إنشاء وحدة تحكّم في التنقّل ومضيف ورسم بياني
يتطلب التنقّل باستخدام Compose لنظام التشغيل Wear OS المكونات الثلاثة نفسها المطلوبة في التطبيقات غير المتوافقة مع Wear OS: وحدة التحكّم في التنقّل والمضيف والرسم البياني.
استخدِم
rememberSwipeDismissableNavController()
لإنشاء مثيل من WearNavigator
، وهو تنفيذ NavController
مناسب لتطبيقات Wear OS:
Kotlin
val navController = rememberSwipeDismissableNavController()
NavController
هي
واجهة برمجة التطبيقات الأساسية المستخدَمة للتنقّل في تطبيقات Compose. يتحكّم هذا العنصر في التنقّل
بين العناصر القابلة للتجميع في مضيف التنقّل الذي يمثّل رمزه على نظام التشغيل Wear OS هو
SwipeDismissableNavHost
.
Kotlin
val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { // TODO: build navigation graph }
مثل العنصر القابل للتركيب
NavHost
، فإنه يأخذ إشارة إلى وحدة التحكّم في التنقّل ومسار الوجهة
الأولية وباني الرسم البياني للتنقّل الذي يظهر هنا كدالّة lambda متأخرة.
يجب توفير وجهة البدء في أداة إنشاء الرسم البياني للتنقّل، بالإضافة إلى جميع الوجهات الأخرى التي يجب أن يكون بالإمكان التنقّل بينها باستخدام أداة التحكّم في التنقّل.
في تطبيق Wear OS، حدِّدSwipeDismissableNavHost
كمحتوى
AppScaffold
لتفعيل المكوّنات ذات المستوى الأعلى، مثل الوقت ومؤشر التمرير/الموضع ومؤشر
الصفحة.
استخدِم عنصر AppScaffold
فوق SwipeDismissableNavHost
وScreenScaffold
على مستوى الشاشة لإضافة عنصر TimeText
إلى الشاشة تلقائيًا والتأكّد من أنّه يتحرك بشكل صحيح عند التنقّل
بين الشاشات.
بالإضافة إلى ذلك، يضيف ScreenScaffold
PositionIndicator
للمحتوى الذي يمكن التمرير فيه.
AppScaffold { val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { composable("message_list") { MessageList(onMessageClick = { id -> navController.navigate("message_detail/$id") }) } composable("message_detail/{id}") { MessageDetail(id = it.arguments?.getString("id")!!) } } } } // Implementation of one of the screens in the navigation @Composable fun MessageDetail(id: String) { // .. Screen level content goes here val scrollState = rememberTransformingLazyColumnState() val padding = rememberResponsiveColumnPadding( first = ColumnItemType.BodyText ) ScreenScaffold( scrollState = scrollState, contentPadding = padding ) { // Screen content goes here
للاطّلاع على مزيد من المعلومات عن Jetpack Navigation، اطّلِع على مقالة التنقّل باستخدام Compose أو يمكنك المشاركة في مختبر رموز Jetpack Navigation.
أفلام مُقترَحة لك
- ملاحظة: يتم عرض نص الرابط عندما تكون لغة JavaScript غير مفعّلة.
- نقل بيانات واجهة التنقّل في Jetpack إلى واجهة التنقّل المطوَّرة باستخدام Compose
- التنقّل باستخدام Compose
- التنقّل بين الشاشات باستخدام ميزة "الإنشاء"