التنقّل باستخدام ميزة الإنشاء في نظام التشغيل Wear OS
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يتيح مكوِّن التنقّل في Android Jetpack إمكانية استخدام تطبيقات Jetpack Compose. يمكنك التنقّل بين العناصر القابلة للإنشاء
مع الاستفادة من البنية الأساسية والميزات التي يوفّرها
مكوّن Navigation.
توضّح هذه الصفحة الاختلافات بين Jetpack Navigation وCompose for Wear OS.
ضبط إعدادات الميزة
استخدِم الاعتمادية التالية في ملف build.gradle الخاص بوحدة تطبيقك:
يتم استخدام هذا العنصر بدلاً من العنصر androidx.navigation:navigation-compose لأنّه يوفّر عمليات تنفيذ بديلة خاصة بنظام التشغيل Wear OS.
إنشاء أداة تحكّم في التنقّل ومضيف ورسم بياني
يتطلّب التنقّل باستخدام Compose for Wear OS توفّر المكوّنات الثلاثة نفسها المطلوبة في التطبيقات التي لا تعمل على Wear OS، وهي: أداة التحكّم في التنقّل والمضيف والرسم البياني.
NavController هي واجهة برمجة التطبيقات الأساسية المستخدَمة للتنقّل في تطبيقات Compose. يتحكّم هذا العنصر في التنقّل بين العناصر القابلة للإنشاء في مضيف التنقّل، وهو SwipeDismissableNavHost على Wear OS.
كما هو الحال مع NavHostComposable،
يأخذ هذا الرمز مرجعًا إلى أداة التحكّم في التنقّل ومسار وجهة البدء وأداة إنشاء الرسم البياني للتنقّل، والتي تظهر هنا كدالة لامدا لاحقة.
يجب توفير وجهة البدء في أداة إنشاء الرسم البياني للتنقّل، بالإضافة إلى جميع الوجهات الأخرى التي يجب أن يكون من الممكن التنقّل إليها باستخدام أداة التحكّم في التنقّل.
في تطبيق 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){scaffoldPaddingValues->
// Screen content goes here
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-09-02 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-09-02 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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 ) { scaffoldPaddingValues -\u003e\n // Screen content goes here \nhttps://github.com/android/snippets/blob/e4396f6dd13aaa8099c4baa671cdd549a10f201c/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)"]]