इस गाइड में बताया गया है कि टॉप ऐप्लिकेशन बार में मौजूद नेविगेशन आइकॉन को नेविगेशन ऐक्शन करने के लिए कैसे सेट किया जा सकता है.
उदाहरण
नीचे दिया गया स्निपेट, फ़ंक्शन वाले नेविगेशन आइकॉन के साथ ऐप्लिकेशन के सबसे ऊपर मौजूद बार को लागू करने का एक छोटा उदाहरण है. इस मामले में, आइकॉन उपयोगकर्ता को ऐप्लिकेशन में उसके पिछले डेस्टिनेशन पर ले जाता है:
@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...
अन्य संसाधन
अपने ऐप्लिकेशन में नेविगेशन लागू करने के तरीके के बारे में ज़्यादा जानने के लिए, यहां दी गई गाइड की सीरीज़ देखें:
- Compose का इस्तेमाल करके नेविगेट करना
- NavController बनाना
- नेविगेशन ग्राफ़ डिज़ाइन करना
- कॉम्पोज़ेबल पर जाना