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

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

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

চিত্র 1. একটি একক-নির্বাচন বোতাম (1) এবং একটি বহু-নির্বাচন বোতাম (2)।

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 কম্পোজেবল ব্যবহার করে বোতাম লেবেল প্রদর্শন করে।

ফলাফল

চিত্র 2. একটি বিকল্প বাছাই করা একটি একক-নির্বাচন বোতাম।

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

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

@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 এবং বোতামের চেক করা অবস্থার উপর ভিত্তি করে একটি আইকন প্রদর্শন করে।
  • উপযুক্ত ইমেজ ভেক্টর এবং বিষয়বস্তুর বিবরণ সহ Icon কম্পোজেবল ব্যবহার করে label লেবেলের সাথে সম্পর্কিত একটি আইকন প্রদর্শন করে।

ফলাফল

চিত্র 2. একটি বহু-নির্বাচন সেগমেন্টেড বোতাম যেখানে দুটি বিকল্প বাছাই করা হয়েছে।

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

• উপাদান 3: সেগমেন্টেড বোতাম