मेन्यू

ड्रॉप-डाउन मेन्यू की मदद से, उपयोगकर्ता किसी आइकॉन, टेक्स्ट फ़ील्ड या अन्य कॉम्पोनेंट पर क्लिक कर सकते हैं. इसके बाद, वे अस्थायी तौर पर दिखने वाली स्क्रीन पर विकल्पों की सूची में से कोई विकल्प चुन सकते हैं. इस गाइड में, बुनियादी मेन्यू और डिवाइडर और आइकॉन वाले ज़्यादा जटिल मेन्यू, दोनों बनाने का तरीका बताया गया है.

दो विकल्पों वाला ड्रॉपडाउन मेन्यू दिखाया गया है. तीन वर्टिकल डॉट वाले आइकॉन का मतलब है कि इस पर क्लिक करने से मेन्यू खुलता है.
पहली इमेज. दो आइटम वाला एक सामान्य ड्रॉप-डाउन मेन्यू.

एपीआई सरफेस

पसंद के मुताबिक ड्रॉप-डाउन मेन्यू लागू करने के लिए, DropdownMenu, DropdownMenuItem, और IconButton कॉम्पोनेंट का इस्तेमाल करें. DropdownMenu और DropdownMenuItem कॉम्पोनेंट का इस्तेमाल, मेन्यू आइटम दिखाने के लिए किया जाता है. वहीं, IconButton का इस्तेमाल, ड्रॉप-डाउन मेन्यू को दिखाने या छिपाने के लिए किया जाता है.

DropdownMenu कॉम्पोनेंट के मुख्य पैरामीटर में ये शामिल हैं:

  • expanded: इससे पता चलता है कि मेन्यू दिख रहा है या नहीं.
  • onDismissRequest: इस कुकी का इस्तेमाल, मेन्यू को बंद करने के लिए किया जाता है.
  • content: मेन्यू का कंपोज़ेबल कॉन्टेंट. इसमें आम तौर पर DropdownMenuItem कंपोज़ेबल शामिल होते हैं.

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

  • text: इससे मेन्यू आइटम में दिखने वाले कॉन्टेंट के बारे में पता चलता है.
  • onClick: मेन्यू में मौजूद आइटम के साथ इंटरैक्शन को मैनेज करने के लिए कॉलबैक.

बुनियादी ड्रॉप-डाउन मेन्यू बनाना

यहां दिए गए स्निपेट में, DropdownMenu को लागू करने का एक सामान्य उदाहरण दिखाया गया है:

@Composable
fun MinimalDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            DropdownMenuItem(
                text = { Text("Option 1") },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Option 2") },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

कोड के बारे में अहम जानकारी

  • इसमें दो मेन्यू आइटम वाला एक सामान्य DropdownMenu तय किया गया है.
  • expanded पैरामीटर से यह कंट्रोल किया जाता है कि मेन्यू को बड़ा करके दिखाया जाए या छोटा करके.
  • onDismissRequest पैरामीटर, एक कॉलबैक तय करता है. यह कॉलबैक तब काम करता है, जब उपयोगकर्ता मेन्यू बंद करता है.
  • DropdownMenuItem कंपोज़ेबल, ड्रॉप-डाउन मेन्यू में चुने जा सकने वाले आइटम दिखाता है.
  • IconButton से मेन्यू को बड़ा और छोटा किया जा सकता है.

नतीजा

तीन वर्टिकल बिंदुओं वाले आइकॉन से ट्रिगर किया गया ड्रॉपडाउन मेन्यू. मेन्यू में चुनने के लिए दो विकल्प दिख रहे हैं: विकल्प 1 और विकल्प 2.
दूसरी इमेज. सिर्फ़ दो विकल्पों वाला छोटा ड्रॉप-डाउन मेन्यू.

लंबा ड्रॉप-डाउन मेन्यू बनाना

अगर सभी मेन्यू आइटम एक साथ नहीं दिखाए जा सकते, तो DropdownMenu डिफ़ॉल्ट रूप से स्क्रोल किया जा सकता है. यहां दिया गया स्निपेट, स्क्रोल किए जा सकने वाला लंबा ड्रॉप-डाउन मेन्यू बनाता है:

@Composable
fun LongBasicDropdownMenu() {
    var expanded by remember { mutableStateOf(false) }
    // Placeholder list of 100 strings for demonstration
    val menuItemData = List(100) { "Option ${it + 1}" }

    Box(
        modifier = Modifier
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            menuItemData.forEach { option ->
                DropdownMenuItem(
                    text = { Text(option) },
                    onClick = { /* Do something... */ }
                )
            }
        }
    }
}
Menus.kt

कोड के बारे में अहम जानकारी

  • DropdownMenu को तब स्क्रोल किया जा सकता है, जब उसके कॉन्टेंट की कुल ऊंचाई, उपलब्ध जगह से ज़्यादा हो. इस कोड से स्क्रोल किया जा सकने वाला DropdownMenu बनाया जाता है. इसमें 100 प्लेसहोल्डर आइटम दिखते हैं.
  • forEach लूप, DropdownMenuItem कंपोज़ेबल को डाइनैमिक रूप से जनरेट करता है. आइटम तुरंत नहीं बनाए जाते. इसका मतलब है कि ड्रॉप-डाउन के सभी 100 आइटम बनाए जाते हैं और कंपोज़िशन में मौजूद होते हैं.
  • IconButton पर क्लिक करने से, DropdownMenu बड़ा और छोटा होता है.
  • हर DropdownMenuItem में मौजूद onClick लैम्डा की मदद से, यह तय किया जा सकता है कि जब उपयोगकर्ता कोई मेन्यू आइटम चुने, तो कौनसा ऐक्शन किया जाए.

नतीजा

ऊपर दिया गया कोड स्निपेट, स्क्रोल किए जा सकने वाले इस मेन्यू को जनरेट करता है:

कई विकल्पों वाला ड्रॉपडाउन मेन्यू. इसमें सभी आइटम देखने के लिए स्क्रोल करना पड़ता है.
तीसरी इमेज. एक लंबा, स्क्रोल किया जा सकने वाला ड्रॉप-डाउन मेन्यू.

डिवाइडर के साथ लंबा ड्रॉप-डाउन मेन्यू बनाना

नीचे दिए गए स्निपेट में, ड्रॉप-डाउन मेन्यू को लागू करने का ज़्यादा बेहतर तरीका दिखाया गया है. इस स्निपेट में, मेन्यू आइटम में लीडिंग और ट्रेलिंग आइकॉन जोड़े गए हैं. साथ ही, डिवाइडर मेन्यू आइटम के ग्रुप को अलग करते हैं.

@Composable
fun DropdownMenuWithDetails() {
    var expanded by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        IconButton(onClick = { expanded = !expanded }) {
            Icon(Icons.Default.MoreVert, contentDescription = "More options")
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false }
        ) {
            // First section
            DropdownMenuItem(
                text = { Text("Profile") },
                leadingIcon = { Icon(Icons.Outlined.Person, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Settings") },
                leadingIcon = { Icon(Icons.Outlined.Settings, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Second section
            DropdownMenuItem(
                text = { Text("Send Feedback") },
                leadingIcon = { Icon(Icons.Outlined.Feedback, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.Send, contentDescription = null) },
                onClick = { /* Do something... */ }
            )

            HorizontalDivider()

            // Third section
            DropdownMenuItem(
                text = { Text("About") },
                leadingIcon = { Icon(Icons.Outlined.Info, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
            DropdownMenuItem(
                text = { Text("Help") },
                leadingIcon = { Icon(Icons.AutoMirrored.Outlined.Help, contentDescription = null) },
                trailingIcon = { Icon(Icons.AutoMirrored.Outlined.OpenInNew, contentDescription = null) },
                onClick = { /* Do something... */ }
            )
        }
    }
}
Menus.kt

इस कोड से, Box में मौजूद DropdownMenu के बारे में पता चलता है.

कोड के बारे में अहम जानकारी

  • leadingIcon और trailingIcon पैरामीटर, DropdownMenuItem की शुरुआत और आखिर में आइकॉन जोड़ते हैं.
  • IconButton से मेन्यू बड़ा हो जाता है.
  • DropdownMenu में कई DropdownMenuItem कंपोज़ेबल होते हैं. इनमें से हर एक, चुनी जा सकने वाली कार्रवाई को दिखाता है.
  • HorizontalDivider कंपोज़ेबल, मेन्यू आइटम के ग्रुप को अलग करने के लिए हॉरिज़ॉन्टल लाइन डालते हैं.

नतीजा

ऊपर दिया गया स्निपेट, आइकॉन और डिवाइडर वाला ड्रॉप-डाउन मेन्यू बनाता है:

एक ड्रॉपडाउन मेन्यू, जिसमें प्रोफ़ाइल, सेटिंग, सुझाव/राय दें या शिकायत करें, इसके बारे में जानकारी, और सहायता के सेक्शन होते हैं. हर विकल्प के लिए एक आइकॉन होता है. जैसे, प्रोफ़ाइल के लिए व्यक्ति का आइकॉन.
चौथी इमेज. ड्रॉप-डाउन मेन्यू को सेक्शन में बांटा गया है. इसमें शुरुआत और आखिर में आइकॉन दिए गए हैं.

अन्य संसाधन