دکمه رادیو، دکمه رادیو

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

دو دکمه رادیویی بدون برچسب. دکمه سمت چپ انتخاب می شود و دایره برای نشان دادن حالت انتخابی آن پر می شود. دکمه سمت راست پر نشده است
شکل 1. یک جفت دکمه رادیویی با یک گزینه انتخاب شده است.

سطح API

از RadioButton composable برای فهرست کردن گزینه های موجود استفاده کنید. هر گزینه 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 composable یک متغیر حالت selectedOption و یک تابع برای به روز رسانی آن حالت به نام onOptionSelected ایجاد می کند. این حالت گزینه دکمه رادیویی انتخاب شده فعلی را نگه می دارد.
    • mutableStateOf(radioOptions[0]) حالت را به اولین مورد در لیست مقداردهی می کند. "تماس ها" اولین مورد است، بنابراین دکمه رادیویی به طور پیش فرض انتخاب شده است.
  • Modifier.selectableGroup() رفتار دسترسی مناسب را برای صفحه خوان ها تضمین می کند. به سیستم اطلاع می‌دهد که عناصر موجود در این Column بخشی از یک گروه قابل انتخاب هستند که پشتیبانی مناسب از صفحه‌خوان را ممکن می‌سازد.
  • Modifier.selectable() باعث می‌شود کل Row به عنوان یک آیتم انتخاب‌پذیر عمل کند.
    • selected نشان می دهد که آیا Row فعلی بر اساس حالت selectedOption انتخاب شده است یا خیر.
    • تابع onClick lambda وضعیت selectedOption را به گزینه کلیک شده به روز می کند وقتی روی Row کلیک می شود.
    • role = Role.RadioButton به خدمات دسترسی اطلاع می دهد که Row به عنوان یک دکمه رادیویی عمل می کند.
  • RadioButton(...) RadioButton قابل ترکیب را ایجاد می کند.
    • onClick = null در RadioButton دسترسی را بهبود می بخشد. این امر از مدیریت مستقیم رویداد کلیک توسط دکمه رادیویی جلوگیری می کند و به اصلاح کننده selectable Row اجازه می دهد تا وضعیت انتخاب و رفتار دسترسی را مدیریت کند.

نتیجه

فهرستی از سه دکمه رادیویی با نام تماس‌ها، از دست رفته و دوستان. دکمه رادیویی Friends انتخاب شده است.
شکل 2. سه دکمه رادیویی با گزینه "Friends" انتخاب شده است.

منابع اضافی

،

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

دو دکمه رادیویی بدون برچسب. دکمه سمت چپ انتخاب می شود و دایره برای نشان دادن حالت انتخابی آن پر می شود. دکمه سمت راست پر نشده است
شکل 1. یک جفت دکمه رادیویی با یک گزینه انتخاب شده است.

سطح API

از RadioButton composable برای فهرست کردن گزینه های موجود استفاده کنید. هر گزینه 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 composable یک متغیر حالت selectedOption و یک تابع برای به روز رسانی آن حالت به نام onOptionSelected ایجاد می کند. این حالت گزینه دکمه رادیویی انتخاب شده فعلی را نگه می دارد.
    • mutableStateOf(radioOptions[0]) حالت را به اولین مورد در لیست مقداردهی می کند. "تماس ها" اولین مورد است، بنابراین دکمه رادیویی به طور پیش فرض انتخاب شده است.
  • Modifier.selectableGroup() رفتار دسترسی مناسب را برای صفحه خوان ها تضمین می کند. به سیستم اطلاع می‌دهد که عناصر موجود در این Column بخشی از یک گروه قابل انتخاب هستند که پشتیبانی مناسب از صفحه‌خوان را ممکن می‌سازد.
  • Modifier.selectable() باعث می‌شود کل Row به عنوان یک آیتم انتخاب‌پذیر عمل کند.
    • selected نشان می دهد که آیا Row فعلی بر اساس حالت selectedOption انتخاب شده است یا خیر.
    • تابع onClick lambda وضعیت selectedOption را به گزینه کلیک شده به روز می کند وقتی روی Row کلیک می شود.
    • role = Role.RadioButton به خدمات دسترسی اطلاع می دهد که Row به عنوان یک دکمه رادیویی عمل می کند.
  • RadioButton(...) RadioButton قابل ترکیب را ایجاد می کند.
    • onClick = null در RadioButton دسترسی را بهبود می بخشد. این امر از مدیریت مستقیم رویداد کلیک توسط دکمه رادیویی جلوگیری می کند و به اصلاح کننده selectable Row اجازه می دهد تا وضعیت انتخاب و رفتار دسترسی را مدیریت کند.

نتیجه

فهرستی از سه دکمه رادیویی با نام تماس‌ها، از دست رفته و دوستان. دکمه رادیویی Friends انتخاب شده است.
شکل 2. سه دکمه رادیویی با گزینه "Friends" انتخاب شده است.

منابع اضافی