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

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

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

এপিআই সারফেস

সেগমেন্টেড বোতাম তৈরি করতে SingleChoiceSegmentedButtonRow এবং MultiChoiceSegmentedButtonRow লেআউট ব্যবহার করুন। এই লেআউটগুলি SegmentedButton এর অবস্থান এবং আকার সঠিকভাবে নির্ধারণ করে এবং নিম্নলিখিত মূল পরামিতিগুলি ভাগ করে:

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

একটি একক-নির্বাচন সেগমেন্টেড বোতাম তৈরি করুন

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

@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 তৈরি করে:
  • SegmentedButtonDefaults.itemShape ব্যবহার করে বোতামের সূচী এবং মোট বিকল্পের সংখ্যার উপর ভিত্তি করে shape তার আকৃতি নির্ধারণ করে।
  • 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 এ সংশ্লিষ্ট আইটেমের নির্বাচিত অবস্থা টগল করে।
  • icon SegmentedButtonDefaults.Icon এবং বোতামের চেক করা অবস্থার উপর ভিত্তি করে একটি আইকন প্রদর্শন করে।
  • label লেবেলের সাথে সম্পর্কিত একটি আইকন প্রদর্শন করে, উপযুক্ত চিত্র ভেক্টর এবং বিষয়বস্তুর বর্ণনা সহ Icon কম্পোজেবল ব্যবহার করে।

ফলাফল

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

• উপাদান ৩: খণ্ডিত বোতাম