تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يوضّح هذا الدليل كيف يمكنك جعل رمز التنقّل في شريط التطبيق العلوي ينفّذ إجراءات التنقّل.
مثال
تعرض القصاصة التالية مثالاً بسيطًا على كيفية تنفيذ شريط تطبيق علوي يتضمّن رمز تنقّل عمليًا. في هذه الحالة، ينقل الرمز المستخدم إلى
وجهته السابقة في التطبيق:
@ComposablefunTopBarNavigationExample(navigateBack:()->Unit,){Scaffold(topBar={CenterAlignedTopAppBar(title={Text("Navigation example",)},navigationIcon={IconButton(onClick=navigateBack){Icon(imageVector=Icons.AutoMirrored.Filled.ArrowBack,contentDescription="Localized description")}},)},){innerPadding->
Text("Click the back button to pop from the back stack.",modifier=Modifier.padding(innerPadding),)}}
NavHost(navController,startDestination="home"){composable("topBarNavigationExample"){TopBarNavigationExample{navController.popBackStack()}}// Other destinations...
مراجع إضافية
لمزيد من المعلومات حول كيفية تنفيذ التنقّل في تطبيقك، اطّلِع على سلسلة الأدلة التالية:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ 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,["This guide demonstrates how you can make the navigation icon in a [top app\nbar](https://m3.material.io/components/top-app-bar/overview) perform navigation actions.\n| **Note:** The example on this page uses `CenterAlignedTopAppBar`, but this is applicable to any app bar component with a `NavigationIcon` parameter.\n\nExample\n\nThe following snippet is a minimal example of how you can implement a top app\nbar with a functional navigation icon. In this case, the icon takes the user to\ntheir previous destination in the app:\n\n\n```kotlin\n@Composable\nfun TopBarNavigationExample(\n navigateBack: () -\u003e Unit,\n) {\n Scaffold(\n topBar = {\n CenterAlignedTopAppBar(\n title = {\n Text(\n \"Navigation example\",\n )\n },\n navigationIcon = {\n IconButton(onClick = navigateBack) {\n Icon(\n imageVector = Icons.AutoMirrored.Filled.ArrowBack,\n contentDescription = \"Localized description\"\n )\n }\n },\n )\n },\n ) { innerPadding -\u003e\n Text(\n \"Click the back button to pop from the back stack.\",\n modifier = Modifier.padding(innerPadding),\n )\n }\n}https://github.com/android/snippets/blob/7a0ebbee11495f628cf9d574f6b6069c2867232a/compose/snippets/src/main/java/com/example/compose/snippets/components/AppBar.kt#L353-L381\n```\n\n\u003cbr /\u003e\n\nKey points about the code\n\nNote the following in this example:\n\n- The composable `TopBarNavigationExample` defines a parameter `navigateBack` of type `() -\u003e Unit`.\n- It passes `navigateBack` for the `navigationIcon` parameter of `CenterAlignedTopAppBar`.\n\nAs such, whenever the user clicks the navigation icon in the top app back, it\ncalls `navigateBack()`.\n\nPass a function\n\nThis example uses a back arrow for the icon. As such, the argument for\n`navigateBack()` should take the user to the previous destination.\n\nTo do so, pass `TopBarNavigationExample` a call to\n[`NavController.popBackStack()`](/guide/navigation/backstack). You do this where you [build your\nnavigation](/guide/navigation/design#compose) graph. For example: \n\n NavHost(navController, startDestination = \"home\") {\n composable(\"topBarNavigationExample\") {\n TopBarNavigationExample{ navController.popBackStack() }\n }\n // Other destinations...\n\n| **Note:** Using the same approach, you could implement a different action for the navigation icon. For example, you could use a house icon and pass a call to `navController.navigate(\"home\")`.\n\nAdditional resources\n\nFor more information on how to implement navigation in your app, see the\nfollowing series of guides:\n\n- [Navigation with Compose](/develop/ui/compose/navigation)\n- [Create a NavController](/develop/ui/compose/navigation#navcontroller)\n- [Design your navigation graph](/guide/navigation/design#compose)\n- [Navigate to a composable](/develop/ui/compose/navigation#nav-to-composable)"]]