با مجموعهها، منظم بمانید
ذخیره و طبقهبندی محتوا براساس اولویتهای شما.
این راهنما نشان میدهد که چگونه میتوانید نماد پیمایش را در نوار بالای برنامه انجام دهید تا اقدامات ناوبری را انجام دهد.
مثال
قطعه زیر یک نمونه حداقلی از نحوه پیاده سازی نوار بالای برنامه با نماد ناوبری کاربردی است. در این حالت، نماد کاربر را به مقصد قبلی خود در برنامه می برد:
@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...
منابع اضافی
برای کسب اطلاعات بیشتر در مورد نحوه اجرای ناوبری در برنامه خود، سری از راهنماهای زیر را ببینید:
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و 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)"]]