मेन्यू

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

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

एपीआई सरफ़ेस

पसंद के मुताबिक ड्रॉप-डाउन मेन्यू बनाने के लिए, 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... */ }
            )
        }
    }
}

कोड के बारे में अहम बातें

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

नतीजा

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

ज़्यादा विकल्पों वाला ड्रॉप-डाउन मेन्यू बनाना

अगर मेन्यू के सभी आइटम एक साथ नहीं दिखाए जा सकते, तो 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... */ }
                )
            }
        }
    }
}

कोड के बारे में अहम बातें

  • जब 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... */ }
            )
        }
    }
}

यह कोड, Box में DropdownMenu को तय करता है.

कोड के बारे में अहम बातें

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

नतीजा

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

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

अन्य संसाधन