ড্রপ-ডাউন মেনু ব্যবহারকারীদের একটি আইকন, টেক্সট ফিল্ড বা অন্য কোনো উপাদানে ক্লিক করার পর একটি অস্থায়ী পৃষ্ঠে থাকা বিকল্পগুলির তালিকা থেকে নির্বাচন করার সুযোগ দেয়। এই নির্দেশিকায় সাধারণ মেনু এবং ডিভাইডার ও আইকনসহ আরও জটিল মেনু—উভয়ই কীভাবে তৈরি করতে হয়, তা বর্ণনা করা হয়েছে।

এপিআই পৃষ্ঠ
একটি কাস্টম ড্রপ-ডাউন মেনু তৈরি করতে 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তৈরি করে যা ১০০টি প্লেসহোল্ডার আইটেম প্রদর্শন করে। -
forEachলুপটি ডাইনামিকভাবেDropdownMenuItemকম্পোজেবল তৈরি করে। আইটেমগুলো লেজিলি তৈরি হয় না, যার অর্থ হলো সব ১০০টি ড্রপ-ডাউন আইটেমই তৈরি হয় এবং কম্পোজিশনটিতে বিদ্যমান থাকে। -
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কম্পোজেবল মেনু আইটেমের গ্রুপগুলোকে আলাদা করার জন্য একটি আনুভূমিক রেখা যুক্ত করে।
ফলাফল
পূর্ববর্তী কোড স্নিপেটটি আইকন এবং বিভাজক সহ একটি ড্রপ-ডাউন মেনু তৈরি করে:

অতিরিক্ত সম্পদ
- ম্যাটেরিয়াল ডিজাইন: মেনু