सबसे ऊपर मौजूद ऐप्लिकेशन बार से नेविगेट करें

इस गाइड में बताया गया है कि टॉप ऐप्लिकेशन बार में मौजूद नेविगेशन आइकॉन से नेविगेशन की कार्रवाइयां कैसे की जा सकती हैं.

उदाहरण

यहां दिए गए स्निपेट में, नेविगेशन आइकॉन के साथ टॉप ऐप्लिकेशन बार को लागू करने का एक छोटा सा उदाहरण दिया गया है. इस मामले में, आइकॉन उपयोगकर्ता को ऐप्लिकेशन में उसकी पिछली जगह पर ले जाता है:

@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...

अन्य संसाधन

अपने ऐप्लिकेशन में नेविगेशन की सुविधा लागू करने के बारे में ज़्यादा जानने के लिए, यहां दी गई गाइड की सीरीज़ देखें: