इस गाइड में बताया गया है कि ऐप्लिकेशन के सबसे ऊपर मौजूद बार में मौजूद नेविगेशन आइकॉन को नेविगेशन की कार्रवाइयां करने के लिए कैसे सेट अप किया जा सकता है.
उदाहरण
यहां दिए गए स्निपेट में, नेविगेशन आइकॉन के साथ टॉप ऐप्लिकेशन बार को लागू करने का एक छोटा सा उदाहरण दिया गया है. इस मामले में, आइकॉन उपयोगकर्ता को ऐप्लिकेशन में उसकी पिछली जगह पर ले जाता है:
@Composable fun TopBarNavigationExample( 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), ) } }
कोड के बारे में मुख्य बातें
इस उदाहरण में इन बातों का ध्यान रखें:
- कंपोज़ेबल
TopBarNavigationExample,() -> Unitटाइप के पैरामीटरnavigateBackको तय करता है. - यह
CenterAlignedTopAppBarकेnavigationIconपैरामीटर के लिएnavigateBackपास करता है.
इसलिए, जब भी उपयोगकर्ता सबसे ऊपर मौजूद ऐप्लिकेशन बार में नेविगेशन आइकॉन पर क्लिक करता है, तो यह navigateBack() को कॉल करता है.
फ़ंक्शन पास करना
इस उदाहरण में, आइकॉन के लिए बैक ऐरो का इस्तेमाल किया गया है. इसलिए, navigateBack() के लिए आर्ग्युमेंट को उपयोगकर्ता को पिछले डेस्टिनेशन पर ले जाना चाहिए.
ऐसा करने के लिए, TopBarNavigationExample को NavController.popBackStack() को कॉल करने के लिए पास करें. ऐसा उस जगह पर किया जाता है जहां नेविगेशन ग्राफ़ बनाया जाता है. उदाहरण के लिए:
NavHost(navController, startDestination = "home") {
composable("topBarNavigationExample") {
TopBarNavigationExample{ navController.popBackStack() }
}
// Other destinations...
अन्य संसाधन
अपने ऐप्लिकेशन में नेविगेशन की सुविधा लागू करने के बारे में ज़्यादा जानने के लिए, यहां दी गई गाइड की सीरीज़ देखें: