রেডিও বোতাম

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

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

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-এর selectable মডিফায়ারকে সিলেকশন স্টেট ও অ্যাক্সেসিবিলিটি আচরণ ম্যানেজ করার অনুমতি দেয়।

ফলাফল

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

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