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

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

চিত্র 1. একটি বিকল্পের সাথে একজোড়া রেডিও বোতাম নির্বাচন করা হয়েছে৷

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)
                )
            }
        }
    }
}
RadioButton.kt

কোড সম্পর্কে মূল পয়েন্ট

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

ফলাফল

চিত্র 2. "বন্ধু" বিকল্পের সাথে তিনটি রেডিও বোতাম নির্বাচন করা হয়েছে৷

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

• উপাদান নকশা: বোতাম