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

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

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

এপিআই পৃষ্ঠ

উপলব্ধ বিকল্পগুলি তালিকাভুক্ত করতে 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 কম্পোজেবল ফাংশনটি selectedOption একটি স্টেট ভ্যারিয়েবল এবং সেই স্টেট আপডেট করার জন্য onOptionSelected নামে একটি ফাংশন তৈরি করে। এই স্টেটটি নির্বাচিত রেডিও বাটন অপশনটি ধারণ করে।
    • mutableStateOf(radioOptions[0]) স্টেটকে তালিকার প্রথম আইটেমে ইনিশিয়ালাইজ করে। "Calls" হলো প্রথম আইটেম, তাই এটি ডিফল্টরূপে নির্বাচিত রেডিও বাটন।
  • Modifier.selectableGroup() স্ক্রিন রিডারদের জন্য যথাযথ অ্যাক্সেসিবিলিটি আচরণ নিশ্চিত করে। এটি সিস্টেমকে জানায় যে এই Column অন্তর্ভুক্ত উপাদানগুলো একটি নির্বাচনযোগ্য গ্রুপের অংশ, যা স্ক্রিন রিডারের জন্য সঠিক সমর্থন সক্ষম করে।
  • Modifier.selectable() পুরো Row একটি একক নির্বাচনযোগ্য আইটেম হিসেবে কাজ করায়।
    • selected নির্দেশ করে যে selectedOption অবস্থার উপর ভিত্তি করে বর্তমান Row নির্বাচিত হয়েছে কিনা।
    • যখন Row ক্লিক করা হয়, তখন onClick ল্যাম্বডা ফাংশনটি selectedOption স্টেটকে ক্লিক করা অপশন অনুযায়ী আপডেট করে।
    • role = Role.RadioButton অ্যাক্সেসিবিলিটি পরিষেবাগুলিকে জানায় যে Row একটি রেডিও বোতাম হিসাবে কাজ করে।
  • RadioButton(...) একটি RadioButton কম্পোজেবল তৈরি করে।
    • RadioButton এ onClick = null অ্যাক্সেসিবিলিটি উন্নত হয়। এর ফলে রেডিও বাটনটি সরাসরি ক্লিক ইভেন্ট হ্যান্ডেল করতে পারে না, এবং Row এর selectable মডিফায়ার সিলেকশন স্টেট ও অ্যাক্সেসিবিলিটি আচরণ নিয়ন্ত্রণ করে।

ফলাফল

কল, মিসড এবং ফ্রেন্ডস লেবেলযুক্ত তিনটি রেডিও বাটনের একটি তালিকা। ফ্রেন্ডস রেডিও বাটনটি নির্বাচিত আছে।
চিত্র ২। 'Friends' অপশনটি নির্বাচিত থাকা তিনটি রেডিও বাটন।

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