دکمه رادیویی

دکمه رادیویی به کاربر امکان می‌دهد گزینه‌ای را از مجموعه‌ای از گزینه‌ها انتخاب کند. وقتی فقط یک مورد از فهرست را بتوان انتخاب کرد، از دکمه رادیویی استفاده می‌کنید. اگر کاربران باید بیش‌از یک مورد را انتخاب کنند، به‌جای آن از کلید استفاده کنید.

سطح میانای برنامه‌سازی کاربردی

از عنصر ترکیبی 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 نشان می‌دهد که Row فعلی براساس وضعیت selectedOption انتخاب شده است یا نه.
  • وقتی روی Row کلیک می‌شود، تابع لامبدای onClick وضعیت selectedOption را به گزینه کلیک‌شده به‌روز می‌کند.
  • ‫role = Role.RadioButton به خدمات دسترس‌پذیری اطلاع می‌دهد که Row به‌عنوان دکمه رادیویی عمل می‌کند.
• ‫RadioButton(...) عنصر ترکیبی RadioButton را ایجاد می‌کند.
  • ‫onClick = null در RadioButton دسترس‌پذیری را بهبود می‌بخشد. این کار باعث می‌شود دکمه رادیویی رویداد کلیک را مستقیماً مدیریت نکند و به اصلاح‌کننده selectable در Row اجازه می‌دهد وضعیت انتخاب و رفتار دسترس‌پذیری را مدیریت کند.

نتیجه

منابع بیشتر

• طراحی سه‌بعدی: دکمه‌ها