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