नेविगेशन रेल

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

• टॉप-लेवल डेस्टिनेशन, जिन्हें ऐप्लिकेशन में कहीं से भी ऐक्सेस किया जा सकता है
• तीन से सात मुख्य डेस्टिनेशन
• टैबलेट या डेस्कटॉप लेआउट

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

एपीआई का प्लैटफ़ॉर्म

अपने ऐप्लिकेशन में रेल लागू करने के लिए, NavigationRailItem के साथ NavigationRail कॉम्पोज़ेबल का इस्तेमाल करें. NavigationRailItem, रेल कॉलम में एक रेल आइटम को दिखाता है.

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

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

उदाहरण: रेल पर आधारित नेविगेशन

नीचे दिया गया स्निपेट, नेविगेशन रेल लागू करता है, ताकि उपयोगकर्ता किसी ऐप्लिकेशन की अलग-अलग स्क्रीन पर नेविगेट कर सकें:

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

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

प्रमुख बिंदु

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

नतीजा

नीचे दी गई इमेज में, पिछले स्निपेट का नतीजा दिखाया गया है:

अन्य संसाधन

• तीसरा कॉन्टेंट - नेविगेशन रेल
• Compose का इस्तेमाल करके नेविगेट करना