সেগমেন্টেড বোতাম

পাশাপাশি দেখানো বিকল্পের সেট থেকে ব্যবহারকারীদের বেছে নিতে দিতে, সেগমেন্ট করা বোতাম ব্যবহার করুন। সেগমেন্টেড বোতাম দুই ধরনের হয়:

• একবার বেছে নেওয়ার বোতাম: ব্যবহারকারীদের একটি বিকল্প বেছে নিতে দেয়।
• একাধিক বেছে নেওয়ার বোতাম: ব্যবহারকারীদের দুটি থেকে পাঁচটি আইটেমের মধ্যে থেকে বেছে নিতে দেয়। আরও জটিল বিকল্পের ক্ষেত্রে অথবা পাঁচটি আইটেমের বেশি হলে, চিপ ব্যবহার করুন।

API সারফেস

সেগমেন্ট করা বোতাম তৈরি করতে SingleChoiceSegmentedButtonRow এবং MultiChoiceSegmentedButtonRow লেআউট ব্যবহার করুন। এইসব লেআউট সঠিকভাবে পজিশন ও সাইজ SegmentedButtonকরে, এবং নিম্নলিখিত মূল প্যারামিটার শেয়ার করে:

• space: বোতামগুলির মধ্যে ওভারল্যাপ অ্যাডজাস্ট করে।
• content: এতে সেগমেন্ট করা বোতামের সারির কন্টেন্ট থাকে, যা সাধারণত SegmentedButton-এর একটি ক্রম হয়।

সিঙ্গেল-সিলেক্ট সেগমেন্টেড বোতাম তৈরি করা

এই উদাহরণে দেখানো হয়েছে কীভাবে একটি সিঙ্গল-সিলেক্ট সেগমেন্টেড বোতাম তৈরি করতে হয়:

@Composable
fun SingleChoiceSegmentedButton(modifier: Modifier = Modifier) {
    var selectedIndex by remember { mutableIntStateOf(0) }
    val options = listOf("Day", "Month", "Week")

    SingleChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                onClick = { selectedIndex = index },
                selected = index == selectedIndex,
                label = { Text(label) }
            )
        }
    }
}
SegmentedButton.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• বেছে নেওয়া বোতামের ইন্ডেক্স ট্র্যাক করতে remember ও mutableIntStateOf ব্যবহার করে একটি selectedIndex ভেরিয়েবল ইনিশিয়ালাইজ করে।
• বোতামের লেবেল বোঝানোর জন্য options-এর একটি তালিকা নির্ধারণ করে।
• SingleChoiceSegmentedButtonRow আপনাকে শুধুমাত্র একটি বোতাম বেছে নিতে দেয়।
• forEachIndexed লুপের মধ্যে প্রতিটি বিকল্পের জন্য একটি SegmentedButton তৈরি করে:
  • shape বোতামের ইন্ডেক্স ও SegmentedButtonDefaults.itemShape ব্যবহার করে বিকল্পের মোট সংখ্যার উপর ভিত্তি করে বোতামের আকার নির্ধারণ করে।
  • ক্লিক করা বোতামের ইন্ডেক্স সহ onClick আপডেট selectedIndex।
  • selected selectedIndex-এর উপর ভিত্তি করে বোতামের বেছে নেওয়ার স্ট্যাটাস সেট করে।
  • label Text কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করে বোতামের লেবেল দেখায়।

ফলাফল

একাধিক বেছে নেওয়ার সুবিধা সহ সেগমেন্টেড বোতাম তৈরি করা

এই উদাহরণে দেখানো হয়েছে যে কীভাবে আইকন সহ একাধিক বিকল্প বেছে নেওয়ার মতো সেগমেন্টেড বোতাম তৈরি করতে হয়:

@Composable
fun MultiChoiceSegmentedButton(modifier: Modifier = Modifier) {
    val selectedOptions = remember {
        mutableStateListOf(false, false, false)
    }
    val options = listOf("Walk", "Ride", "Drive")

    MultiChoiceSegmentedButtonRow {
        options.forEachIndexed { index, label ->
            SegmentedButton(
                shape = SegmentedButtonDefaults.itemShape(
                    index = index,
                    count = options.size
                ),
                checked = selectedOptions[index],
                onCheckedChange = {
                    selectedOptions[index] = !selectedOptions[index]
                },
                icon = { SegmentedButtonDefaults.Icon(selectedOptions[index]) },
                label = {
                    when (label) {
                        "Walk" -> Icon(
                            imageVector =
                            Icons.AutoMirrored.Filled.DirectionsWalk,
                            contentDescription = "Directions Walk"
                        )
                        "Ride" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsBus,
                            contentDescription = "Directions Bus"
                        )
                        "Drive" -> Icon(
                            imageVector =
                            Icons.Default.DirectionsCar,
                            contentDescription = "Directions Car"
                        )
                    }
                }
            )
        }
    }
}
SegmentedButton.kt

কোড সম্পর্কে গুরুত্বপূর্ণ পয়েন্ট

• কোডটি remember এবং mutableStateListOf ব্যবহার করে selectedOptions ভেরিয়েবেল ইনিশিয়ালাইজ করে। এটি প্রতিটি বোতামের বেছে নেওয়া স্ট্যাটাস ট্র্যাক করে।
• বোতামগুলি রাখার জন্য কোডে MultiChoiceSegmentedButtonRow ব্যবহার করা হয়েছে।
• forEachIndexed লুপের মধ্যে, কোড প্রতিটি বিকল্পের জন্য একটি SegmentedButton তৈরি করে:
  • shape বোতামের ইন্ডেক্স ও বিকল্পের মোট সংখ্যার ভিত্তিতে বোতামের আকার নির্ধারণ করে।
  • checked selectedOptions-এ সংশ্লিষ্ট ভ্যালুর উপর ভিত্তি করে বোতামের চেক করা স্ট্যাটাস সেট করে।
  • বোতামে ক্লিক করা হলে, onCheckedChange selectedOptions-এ সংশ্লিষ্ট আইটেমের বেছে নেওয়া স্ট্যাটাস টগল করে।
  • SegmentedButtonDefaults.Icon এবং বোতামের চেক করা অবস্থার উপর ভিত্তি করে icon একটি আইকন দেখায়।
  • label লেবেলের সাথে মানানসই আইকন দেখায়, এর জন্য Icon উপযুক্ত ইমেজ ভেক্টর ও কন্টেন্টের বিবরণ সহ কম্পোজ করার উপযুক্ত আইটেম ব্যবহার করা হয়।

ফলাফল

অতিরিক্ত রিসোর্স

• Material 3: সেগমেন্ট করা বোতাম