মেনু

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

দুটি বিকল্পসহ একটি ড্রপডাউন মেনু প্রদর্শিত হচ্ছে। তিনটি উল্লম্ব বিন্দুযুক্ত একটি আইকন নির্দেশ করে যে এটিতে ক্লিক করলে মেনুটি খুলবে।
চিত্র ১. দুটি আইটেম তালিকাভুক্ত একটি সাধারণ ড্রপ-ডাউন মেনু।

এপিআই পৃষ্ঠ

একটি কাস্টম ড্রপ-ডাউন মেনু তৈরি করতে 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 কম্পোজেবল মেনু আইটেমের গ্রুপগুলোকে আলাদা করার জন্য একটি আনুভূমিক রেখা যুক্ত করে।

ফলাফল

পূর্ববর্তী কোড স্নিপেটটি আইকন এবং বিভাজক সহ একটি ড্রপ-ডাউন মেনু তৈরি করে:

একটি ড্রপডাউন মেনু, যেখানে প্রোফাইল, সেটিংস, মতামত পাঠান, পরিচিতি এবং সহায়তা—এই বিভাগগুলো রয়েছে। প্রতিটি বিকল্পের একটি আইকন আছে, যেমন প্রোফাইলের জন্য একজন ব্যক্তির আইকন।
চিত্র ৪। শুরুতে ও শেষে আইকনসহ বিভিন্ন বিভাগে বিভক্ত একটি ড্রপ-ডাউন মেনু।

অতিরিক্ত সম্পদ

  • ম্যাটেরিয়াল ডিজাইন: মেনু