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

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

उदाहरण

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

@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...
पर कॉल पास किया जा सकता है.

अन्य संसाधन

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