রেডিও বোতাম

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

লেবেল ছাড়া দুটি রেডিও বোতাম। বাঁদিকের বোতামটি বেছে নেওয়া হয়েছে এবং বৃত্তটি ফিল করা হয়েছে, এটি বেছে নেওয়া হয়েছে তা বোঝাতে। ডানদিকের বোতামটি পূরণ করা নেই
ছবি ১. একটি বিকল্প বেছে নেওয়া হয়েছে এমন রেডিও বাটনের একটি পেয়ার।

API সারফেস

উপলভ্য বিকল্পের তালিকা তৈরি করতে 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)
                )
            }
        }
    }
}

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

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

ফলাফল

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

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