يتيح مكوِّن التنقّل في Android Jetpack إمكانية استخدام تطبيقات Jetpack Compose. يمكنك التنقّل بين العناصر القابلة للإنشاء مع الاستفادة من البنية الأساسية والميزات التي يوفّرها مكوّن Navigation.
توضّح هذه الصفحة الاختلافات بين Jetpack Navigation وCompose for Wear OS.
ضبط إعدادات الميزة
استخدِم الاعتمادية التالية في ملف build.gradle الخاص بوحدة تطبيقك:
Kotlin
dependencies { def wear_compose_version = "1.5.1" 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 }
كما هو الحال مع NavHost
Composable،
يأخذ هذا الرمز مرجعًا إلى أداة التحكّم في التنقّل ومسار وجهة البدء وأداة إنشاء الرسم البياني للتنقّل، والتي تظهر هنا كدالة لامدا لاحقة.
يجب توفير وجهة البدء في أداة إنشاء الرسم البياني للتنقّل، بالإضافة إلى جميع الوجهات الأخرى التي يجب أن يكون من الممكن التنقّل إليها باستخدام أداة التحكّم في التنقّل.
في تطبيق 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