Radyo düğmesi

Radyo düğmesi, kullanıcının bir seçenek grubundan bir seçenek belirlemesine olanak tanır. Bir listeden yalnızca bir öğe seçilebiliyorsa radyo düğmesi kullanırsınız. Kullanıcıların birden fazla öğe seçmesi gerekiyorsa bunun yerine anahtar kullanın.

Şekil 1. Bir seçeneğin belirlendiği bir çift radyo düğmesi.

API yüzeyi

Mevcut seçenekleri listelemek için RadioButton composable'ını kullanın. Her bir RadioButton seçeneğini ve etiketini bir Row bileşenine sarmalayarak gruplandırın.

RadioButton aşağıdaki temel parametreleri içerir:

• selected: Radyo düğmesinin seçili olup olmadığını gösterir.
• onClick: Kullanıcı radyo düğmesini tıkladığında uygulamanızın yürüttüğü bir lambda işlevi. Bu özellik null değerine ayarlanmışsa kullanıcı radyo düğmesiyle doğrudan etkileşim kuramaz.
• enabled: Radyo düğmesinin etkin mi yoksa devre dışı mı olduğunu kontrol eder. Kullanıcılar, devre dışı bırakılmış radyo düğmeleriyle etkileşimde bulunamaz.
• interactionSource: Düğmenin etkileşim durumunu (ör. basılı, fareyle üzerine gelindi veya odaklanıldı) gözlemlemenizi sağlar.

Temel radyo düğmesi oluşturma

Aşağıdaki kod snippet'i, Column içinde bir radyo düğmesi listesi oluşturur:

@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

Kodla ilgili önemli noktalar

• radioOptions, radyo düğmelerinin etiketlerini temsil eder.
• remember composable işlevi, bir durum değişkeni selectedOption ve bu durumu güncellemek için onOptionSelected adlı bir işlev oluşturur. Bu durum, seçilen radyo düğmesi seçeneğini içerir.
  • mutableStateOf(radioOptions[0]), durumu listedeki ilk öğeye başlatır. "Aramalar" ilk öğe olduğundan varsayılan olarak seçilen radyo düğmesidir.
• Modifier.selectableGroup(), ekran okuyucular için uygun erişilebilirlik davranışını sağlar. Sisteme, bu Column içindeki öğelerin seçilebilir bir grubun parçası olduğunu bildirir. Bu sayede ekran okuyucu desteği düzgün şekilde sağlanır.
• Modifier.selectable(), tüm Row öğesinin seçilebilir tek bir öğe olarak davranmasını sağlar.
  • selected, geçerli Row öğesinin selectedOption durumuna göre seçilip seçilmediğini gösterir.
  • onClick lambda işlevi, Row tıklandığında selectedOption durumunu tıklanan seçeneğe günceller.
  • role = Role.RadioButton, erişilebilirlik hizmetlerine Row öğesinin radyo düğmesi olarak işlev gördüğünü bildirir.
• RadioButton(...), RadioButton composable'ını oluşturur.
  • RadioButton üzerindeki onClick = null, erişilebilirliği artırır. Bu, radyo düğmesinin tıklama etkinliğini doğrudan işlemesini engeller ve Row öğesinin selectable değiştiricisinin seçim durumunu ve erişilebilirlik davranışını yönetmesine olanak tanır.

Sonuç

Şekil 2. "Arkadaşlar" seçeneğinin belirlendiği üç radyo düğmesi.

Ek kaynaklar

• Materyal Tasarım: Düğmeler