يتيح مكوِّن التنقّل في Android Jetpack إمكانية استخدام تطبيقات Jetpack Compose. يمكنك التنقّل بين العناصر القابلة للإنشاء مع الاستفادة من البنية الأساسية والميزات التي يوفّرها مكوّن Navigation.
توضّح هذه الصفحة الاختلافات بين Jetpack Navigation وCompose for Wear OS.
ضبط إعدادات الميزة
استخدِم الاعتمادية التالية في ملف build.gradle الخاص بوحدة تطبيقك:
Kotlin
dependencies { def wear_compose_version = "1.5.4" implementation "androidx.wear.compose:compose-navigation:$wear_compose_version" }
يتم استخدام هذا العنصر بدلاً من العنصر androidx.navigation:navigation-compose لأنّه يوفّر عمليات تنفيذ بديلة خاصة بنظام التشغيل Wear OS.
إنشاء أداة تحكّم في التنقّل ومضيف ورسم بياني
يتطلّب التنقّل باستخدام Compose for Wear OS توفّر المكوّنات الثلاثة نفسها المطلوبة في التطبيقات التي لا تعمل على Wear OS، وهي: أداة التحكّم في التنقّل والمضيف والرسم البياني.
استخدِم
rememberSwipeDismissableNavController()
لإنشاء مثيل من WearNavigator، وهو تنفيذ NavController
مناسب لتطبيقات Wear OS:
Kotlin
val navController = rememberSwipeDismissableNavController()
NavController هي واجهة برمجة التطبيقات الأساسية المستخدَمة للتنقّل في تطبيقات Compose. يتحكّم هذا العنصر في التنقّل بين العناصر القابلة للإنشاء في مضيف التنقّل، وهو SwipeDismissableNavHost على Wear OS.
Kotlin
val navController = rememberSwipeDismissableNavController() SwipeDismissableNavHost( navController = navController, startDestination = "message_list" ) { // TODO: build navigation graph }
كما هو الحال مع NavHostComposable،
يأخذ هذا الرمز مرجعًا إلى أداة التحكّم في التنقّل ومسار وجهة البدء وأداة إنشاء الرسم البياني للتنقّل، والتي تظهر هنا كدالة لامدا لاحقة.
يجب توفير وجهة البدء في أداة إنشاء الرسم البياني للتنقّل، بالإضافة إلى جميع الوجهات الأخرى التي يجب أن يكون من الممكن التنقّل إليها باستخدام أداة التحكّم في التنقّل.
في تطبيق 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 ) { scaffoldPaddingValues -> // Screen content goes here // ...
لمزيد من المعلومات حول Jetpack Navigation، يمكنك الاطّلاع على التنقّل باستخدام Compose أو المشاركة في تجربة Jetpack Compose Navigation العملية.
اقتراحات مخصصة لك
- ملاحظة: يتم عرض نص الرابط عندما تكون JavaScript غير مفعّلة
- نقل Jetpack Navigation إلى Navigation Compose
- التنقّل باستخدام Compose
- التنقّل بين الشاشات باستخدام Compose