রেডিও বোতাম, রেডিও বোতাম

একটি রেডিও বোতাম ব্যবহারকারীকে বিভিন্ন বিকল্প থেকে একটি বিকল্প নির্বাচন করতে দেয়। যখন একটি তালিকা থেকে শুধুমাত্র একটি আইটেম নির্বাচন করা যায় তখন আপনি একটি রেডিও বোতাম ব্যবহার করেন। যদি ব্যবহারকারীদের একাধিক আইটেম নির্বাচন করতে হয়, তাহলে পরিবর্তে একটি সুইচ ব্যবহার করুন।

দুটি রেডিও বোতাম, কোনও লেবেল ছাড়াই। বাম বোতামটি নির্বাচন করা হয়েছে, এবং বৃত্তটি তার নির্বাচিত অবস্থা নির্দেশ করার জন্য পূরণ করা হয়েছে। ডান বোতামটি পূরণ করা হয়নি।
চিত্র ১. একজোড়া রেডিও বোতাম যেখানে একটি বিকল্প নির্বাচন করা হয়েছে।

এপিআই সারফেস

উপলব্ধ বিকল্পগুলির তালিকা তৈরি করতে RadioButton কম্পোজেবল ব্যবহার করুন। প্রতিটি RadioButton বিকল্প এবং এর লেবেলকে একটি Row কম্পোনেন্টের মধ্যে মুড়ে তাদের একসাথে গ্রুপ করুন।

RadioButton নিম্নলিখিত মূল পরামিতিগুলি অন্তর্ভুক্ত রয়েছে:

  • selected : রেডিও বোতামটি নির্বাচিত কিনা তা নির্দেশ করে।
  • onClick : একটি ল্যাম্বডা ফাংশন যা ব্যবহারকারী যখন রেডিও বোতামে ক্লিক করে তখন আপনার অ্যাপটি কার্যকর করে। যদি এটি null হয়, তাহলে ব্যবহারকারী সরাসরি রেডিও বোতামের সাথে ইন্টারঅ্যাক্ট করতে পারবেন না।
  • enabled : রেডিও বোতামটি সক্রিয় নাকি নিষ্ক্রিয় তা নিয়ন্ত্রণ করে। ব্যবহারকারীরা নিষ্ক্রিয় রেডিও বোতামগুলির সাথে ইন্টারঅ্যাক্ট করতে পারবেন না।
  • interactionSource : আপনাকে বোতামের ইন্টারঅ্যাকশন অবস্থা পর্যবেক্ষণ করতে দেয়, উদাহরণস্বরূপ, এটি চাপা, ঝুলানো, অথবা ফোকাস করা হোক না কেন।

একটি মৌলিক রেডিও বোতাম তৈরি করুন

নিম্নলিখিত কোড স্নিপেটটি একটি Column মধ্যে রেডিও বোতামগুলির একটি তালিকা রেন্ডার করে: 

@Composable
fun RadioButtonSingleSelection(modifier: Modifier = Modifier) {
    val radioOptions = listOf("Calls", "Missed", "Friends")
    val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[0]) }
    // Note that Modifier.selectableGroup() is essential to ensure correct accessibility behavior
    Column(modifier.selectableGroup()) {
        radioOptions.forEach { text ->
            Row(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .selectable(
                        selected = (text == selectedOption),
                        onClick = { onOptionSelected(text) },
                        role = Role.RadioButton
                    )
                    .padding(horizontal = 16.dp),
                verticalAlignment = Alignment.CenterVertically
            ) {
                RadioButton(
                    selected = (text == selectedOption),
                    onClick = null // null recommended for accessibility with screen readers
                )
                Text(
                    text = text,
                    style = MaterialTheme.typography.bodyLarge,
                    modifier = Modifier.padding(start = 16.dp)
                )
            }
        }
    }
}
RadioButton.kt

কোড সম্পর্কে গুরুত্বপূর্ণ বিষয়সমূহ

  • radioOptions রেডিও বোতামগুলির জন্য লেবেলগুলি উপস্থাপন করে।
  • remember composable ফাংশনটি selectedOption একটি state variable এবং onOptionSelected নামে একটি function তৈরি করে। এই state টি selected রেডিও বোতাম অপশনটি ধরে রাখে।
    • mutableStateOf(radioOptions[0]) তালিকার প্রথম আইটেমটিতে অবস্থাটি ইনিশিয়ালাইজ করে। "Calls" হল প্রথম আইটেম, তাই এটি ডিফল্টরূপে নির্বাচিত রেডিও বোতাম।
  • Modifier.selectableGroup() স্ক্রিন রিডারদের জন্য সঠিক অ্যাক্সেসিবিলিটি আচরণ নিশ্চিত করে। এটি সিস্টেমকে জানায় যে এই Column মধ্যে থাকা উপাদানগুলি একটি নির্বাচনযোগ্য গ্রুপের অংশ, যা সঠিক স্ক্রিন রিডার সমর্থন সক্ষম করে।
  • Modifier.selectable() সম্পূর্ণ Row একটি একক নির্বাচনযোগ্য আইটেম হিসেবে কাজ করে।
    • selected নির্দেশ করে যে selectedOption অবস্থার উপর ভিত্তি করে বর্তমান Row নির্বাচিত কিনা।
    • যখন Row এ ক্লিক করা হয়, তখন onClick lambda ফাংশন selectedOption অবস্থাকে clicked অপশনে আপডেট করে।
    • role = Role.RadioButton অ্যাক্সেসিবিলিটি পরিষেবাগুলিকে জানায় যে Row একটি রেডিও বোতাম হিসেবে কাজ করে।
  • RadioButton(...) RadioButton কম্পোজেবল তৈরি করে।
    • RadioButton এ onClick = null অ্যাক্সেসিবিলিটি উন্নত হয়। এটি রেডিও বোতামটিকে সরাসরি ক্লিক ইভেন্ট পরিচালনা করতে বাধা দেয় এবং Row এর selectable modifier কে নির্বাচন অবস্থা এবং অ্যাক্সেসিবিলিটি আচরণ পরিচালনা করতে দেয়।

ফলাফল

কল, মিসড এবং ফ্রেন্ডস লেবেলযুক্ত তিনটি রেডিও বোতামের তালিকা। ফ্রেন্ডস রেডিও বোতামটি নির্বাচন করা হয়েছে।
চিত্র ২. "বন্ধু" বিকল্পটি নির্বাচিত তিনটি রেডিও বোতাম।

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