नेविगेशन बार

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

• तीन से पांच ऐसे डेस्टिनेशन जिनकी अहमियत एक जैसी हो
• विंडो के छोटे साइज़
• ऐप्लिकेशन की सभी स्क्रीन पर एक जैसे डेस्टिनेशन

इस पेज पर, आपके ऐप्लिकेशन में नेविगेशन बार दिखाने का तरीका बताया गया है. इसमें मिलती-जुलती स्क्रीन और बुनियादी नेविगेशन शामिल है.

एपीआई सरफेस

डेस्टिनेशन स्विच करने का लॉजिक लागू करने के लिए, NavigationBar और NavigationBarItem कंपोज़ेबल का इस्तेमाल करें. हर NavigationBarItem एक डेस्टिनेशन को दिखाता है.

NavigationBarItem में ये मुख्य पैरामीटर शामिल होते हैं:

• selected: इससे पता चलता है कि मौजूदा आइटम को विज़ुअल तौर पर हाइलाइट किया गया है या नहीं.
• onClick(): यह एक ज़रूरी लैम्डा फ़ंक्शन है. इससे यह तय होता है कि जब उपयोगकर्ता किसी आइटम पर क्लिक करे, तो कौनसी कार्रवाई की जानी चाहिए. आम तौर पर, यहां नेविगेशन इवेंट मैनेज किए जाते हैं, चुने गए आइटम की स्थिति अपडेट की जाती है या उससे जुड़ा कॉन्टेंट लोड किया जाता है.
• label: इससे आइटम में मौजूद टेक्स्ट दिखता है. ज़रूरी नहीं.
• icon: इससे आइटम में एक आइकॉन दिखता है. ज़रूरी नहीं.

उदाहरण: सबसे नीचे मौजूद नेविगेशन बार

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

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}
Navigation.kt

प्रमुख बिंदु

• NavigationBar में आइटम का कलेक्शन दिखता है. हर आइटम, Destination से जुड़ा होता है.
• val navController = rememberNavController(), NavHostController का एक इंस्टेंस बनाता है और उसे सेव करता है. यह NavHost में नेविगेशन को मैनेज करता है.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } फ़िलहाल चुने गए आइटम की स्थिति को मैनेज करता है.
• var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }, फ़िलहाल चुने गए आइटम की स्थिति को मैनेज करता है.
  • startDestination.ordinal, Destination.SONGS enum एंट्री का संख्यात्मक इंडेक्स (जगह) दिखाता है.
• किसी आइटम पर क्लिक करने पर, navController.navigate(route = destination.route) को कॉल किया जाता है, ताकि उससे जुड़ी स्क्रीन पर नेविगेट किया जा सके.
• onClick लैम्डा, NavigationBarItem की selectedDestination स्थिति को अपडेट करता है, ताकि क्लिक किए गए आइटम को हाइलाइट किया जा सके.
• यह AppNavHost कंपोज़ेबल को कॉल करता है और navController और startDestination को पास करता है, ताकि चुनी गई स्क्रीन का असल कॉन्टेंट दिखाया जा सके.

नतीजा

यहां दी गई इमेज में, पिछले स्निपेट से मिला नेविगेशन बार दिखाया गया है:

अन्य संसाधन

• Material 3 - नेविगेशन बार
• Compose के साथ नेविगेशन