التنقّل باستخدام ميزة الإنشاء في نظام التشغيل Wear OS
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يقدّم مكوّن التنقّل في Android Jetpack
دعمًا لتطبيقات Jetpack Compose. يمكنك التنقّل بين العناصر القابلة للتجميع
مع الاستفادة من البنية الأساسية لعنصر التنقّل و
ميزاته.
توضّح هذه الصفحة الاختلافات مع Jetpack Navigation في Compose لنظام التشغيل
Wear.
ضبط إعدادات الجهاز
استخدِم التبعية التالية في ملف build.gradle الخاص بوحدة تطبيقك:
يتم استخدام هذا العنصر بدلاً من العنصر androidx.navigation:navigation-compose
لأنّه يقدّم عمليات تنفيذ بديلة خاصة بنظام التشغيل Wear OS.
إنشاء وحدة تحكّم في التنقّل ومضيف ورسم بياني
يتطلب التنقّل باستخدام Compose لنظام التشغيل Wear OS المكونات الثلاثة نفسها المطلوبة في
التطبيقات غير المتوافقة مع Wear OS: وحدة التحكّم في التنقّل والمضيف والرسم البياني.
NavController هي
واجهة برمجة التطبيقات الأساسية المستخدَمة للتنقّل في تطبيقات Compose. يتحكّم هذا العنصر في التنقّل
بين العناصر القابلة للتجميع في مضيف التنقّل الذي يمثّل رمزه على نظام التشغيل Wear OS هو
SwipeDismissableNavHost.
مثل العنصر القابل للتركيب
NavHost، فإنه يأخذ إشارة إلى وحدة التحكّم في التنقّل ومسار الوجهة
الأولية وباني الرسم البياني للتنقّل الذي يظهر هنا كدالّة lambda متأخرة.
يجب توفير وجهة البدء في أداة إنشاء الرسم البياني للتنقّل، بالإضافة
إلى جميع الوجهات الأخرى التي يجب أن يكون بالإمكان التنقّل بينها باستخدام أداة التحكّم في التنقّل.
في تطبيق Wear OS، حدِّد SwipeDismissableNavHost كمحتوى
AppScaffold لتفعيل المكوّنات ذات المستوى الأعلى، مثل الوقت ومؤشر التمرير/الموضع ومؤشر
الصفحة.
استخدِم عنصر AppScaffold فوق SwipeDismissableNavHost وScreenScaffold على مستوى الشاشة لإضافة عنصر TimeText
إلى الشاشة تلقائيًا والتأكّد من أنّه يتحرك بشكل صحيح عند التنقّل
بين الشاشات.
بالإضافة إلى ذلك، يضيف ScreenScaffoldPositionIndicator للمحتوى الذي يمكن التمرير فيه.
AppScaffold{valnavController=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@ComposablefunMessageDetail(id:String){// .. Screen level content goes herevalscrollState=rememberTransformingLazyColumnState()valpadding=rememberResponsiveColumnPadding(first=ColumnItemType.BodyText)ScreenScaffold(scrollState=scrollState,contentPadding=padding){// Screen content goes here
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-08-28 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["Compose for Wear OS Material version 2.5 3\n\n*** ** * ** ***\n\nThe [Navigation component](/guide/navigation) in Android Jetpack provides\nsupport for Jetpack Compose applications. You can navigate between composables\nwhile taking advantage of the Navigation component's infrastructure and\nfeatures.\n\nThis page describes the differences with Jetpack Navigation on Compose for Wear\nOS.\n| **Note:** If you are not familiar with the Navigation component, review the [Navigating with Compose](/jetpack/compose/navigation) resources before continuing.\n\nSetup\n\nUse the following dependency in your app module's build.gradle file: \n\nKotlin \n\n```kotlin\ndependencies {\n def wear_compose_version = \"1.5.0\"\n implementation \"androidx.wear.compose:compose-navigation:$wear_compose_version\"\n}\n```\n\nThis is used **instead** of the `androidx.navigation:navigation-compose`\nartifact because it provides alternative implementations specific to Wear OS.\n\nCreate a navigation controller, host and graph\n\nNavigating with Compose for Wear OS requires the same three components needed on\nnon-Wear OS apps: the navigation controller, host and graph.\n\nUse\n[`rememberSwipeDismissableNavController()`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#rememberSwipeDismissableNavController())\nto create an instance of `WearNavigator`, an implementation of `NavController`\nsuitable for Wear OS applications: \n\nKotlin \n\n```kotlin\nval navController = rememberSwipeDismissableNavController()\n```\n\nThe [`NavController`](/reference/kotlin/androidx/navigation/NavController) is\nthe primary API used to navigate in Compose applications. It controls navigating\nbetween composables in the navigation host which, on Wear OS, is\n[`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,kotlin.String,androidx.compose.ui.Modifier,androidx.wear.compose.navigation.SwipeDismissableNavHostState,kotlin.String,kotlin.Function1)). \n\nKotlin \n\n```kotlin\nval navController = rememberSwipeDismissableNavController()\nSwipeDismissableNavHost(\n navController = navController,\n startDestination = \"message_list\"\n) {\n // TODO: build navigation graph\n}\n```\n\nLike the\n[`NavHost` composable](/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.String,androidx.compose.ui.Modifier,kotlin.String,kotlin.Function1)),\nit takes a reference to the navigation controller, the route for the start\ndestination, and the builder for the navigation graph which is shown here as a\ntrailing lambda.\n\nThe start destination must be provided in the navigation graph builder, along\nwith all other destinations that should be navigable with the navigation\ncontroller.\nIn your Wear OS app, declare [`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,androidx.navigation.NavGraph,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.navigation.SwipeDismissableNavHostState)) as a content of the [`AppScaffold`](/reference/kotlin/androidx/wear/compose/material3/package-summary#AppScaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1)) to support top-level components like time, scroll/position indicator, and page indicator. Use a [`AppScaffold`](/reference/kotlin/androidx/wear/compose/material3/package-summary#AppScaffold(androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1)) object above the [`SwipeDismissableNavHost`](/reference/kotlin/androidx/wear/compose/navigation/package-summary#SwipeDismissableNavHost(androidx.navigation.NavHostController,androidx.navigation.NavGraph,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.navigation.SwipeDismissableNavHostState)) and the [`ScreenScaffold`](/reference/kotlin/androidx/wear/compose/material3/package-summary#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0,kotlin.Function1,androidx.compose.ui.unit.Dp,kotlin.Function2)) at the screen level to add a `TimeText` object to the screen by default and to make sure it animates correctly when navigating between screens. Additionally, `ScreenScaffold` adds a `PositionIndicator` for scrollable content. \n\n```kotlin\n AppScaffold {\n val navController = rememberSwipeDismissableNavController()\n SwipeDismissableNavHost(\n navController = navController,\n startDestination = \"message_list\"\n ) {\n composable(\"message_list\") {\n MessageList(onMessageClick = { id -\u003e\n navController.navigate(\"message_detail/$id\")\n })\n }\n composable(\"message_detail/{id}\") {\n MessageDetail(id = it.arguments?.getString(\"id\")!!)\n }\n }\n }\n}\n\n// Implementation of one of the screens in the navigation\n@Composable\nfun MessageDetail(id: String) {\n // .. Screen level content goes here\n val scrollState = rememberTransformingLazyColumnState()\n\n val padding = rememberResponsiveColumnPadding(\n first = ColumnItemType.BodyText\n )\n\n ScreenScaffold(\n scrollState = scrollState,\n contentPadding = padding\n ) {\n // Screen content goes here \nhttps://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/wear/src/main/java/com/example/wear/snippets/m3/navigation/Navigation.kt#L44-L76\n```\n\nTo learn more about Jetpack Navigation, see\n[Navigating with Compose](/jetpack/compose/navigation) or take the\n[Jetpack Compose Navigation code lab](/codelabs/jetpack-compose-navigation).\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Migrate Jetpack Navigation to Navigation Compose](/develop/ui/compose/migrate/migration-scenarios/navigation)\n- [Navigation with Compose](/develop/ui/compose/navigation)\n- [Navigate between screens with Compose](/codelabs/basic-android-kotlin-compose-navigation)"]]