دکمه رادیویی

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

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

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

نتیجه

منابع بیشتر

• طراحی مواد: دکمه‌ها