ड्रॉप-डाउन मेन्यू की मदद से, उपयोगकर्ता किसी आइकॉन, टेक्स्ट फ़ील्ड या अन्य कॉम्पोनेंट पर क्लिक कर सकते हैं. इसके बाद, वे अस्थायी तौर पर दिखने वाली सूची में से कोई विकल्प चुन सकते हैं. इस गाइड में, बुनियादी मेन्यू के साथ-साथ, डिवाइडर और आइकॉन वाले ज़्यादा जटिल मेन्यू बनाने का तरीका बताया गया है.
एपीआई सरफ़ेस
पसंद के मुताबिक ड्रॉप-डाउन मेन्यू लागू करने के लिए, 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कंपोज़ेबल, मेन्यू आइटम के ग्रुप को अलग करने के लिए एक हॉरिज़ॉन्टल लाइन जोड़ते हैं.
नतीजा
ऊपर दिए गए स्निपेट से, आइकॉन और डिवाइडर वाला ड्रॉप-डाउन मेन्यू बनता है:
अन्य संसाधन
- मटीरियल डिज़ाइन: मेन्यू