Radyo düğmesi

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

API yüzeyi

Kullanılabilir seçenekleri listelemek için RadioButton bileşenini kullanın. Her RadioButton seçeneğini ve etiketini birlikte gruplandırmak için bir Row bileşeninin içine yerleştirin.

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

• selected: Radyo düğmesinin seçili olup olmadığını belirtir.
• onClick: Radyo düğmesi tıklandığında çalıştırılan bir lambda işlevi. Bu değer null ise kullanıcı radyo düğmesiyle doğrudan etkileşimde bulunamaz.
• enabled: Radyo düğmesinin etkin olup olmadığını kontrol eder. Kullanıcılar devre dışı bırakılmış radyo düğmeleriyle etkileşim kuramaz.
• interactionSource: Düğmenin etkileşim durumunu (ör. düğmeye basılı olup olmadığını, fareyle üzerine gelinip gelinmediğini veya düğmeye odaklanılıp odaklanılmadığını) gözlemlemenizi sağlar.

Temel radyo düğmesi oluşturma

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

@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 birleştirilebilir işlevi, bir durum değişkeni selectedOption ve bu durumu güncelleyecek bir işlev onOptionSelected oluşturur. Bu durum, şu anda seçili olan radyo düğmesi seçeneğini içerir.
  • mutableStateOf(radioOptions[0]), durumu listedeki ilk öğeyle başlatır. "Aramalar" ilk öğe olduğundan varsayılan olarak seçili olan 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 da ekran okuyucu desteğinin düzgün şekilde sağlanmasını sağlar.
• Modifier.selectable(), Row öğesinin tamamını tek bir seçilebilir öğe olarak işlev görür.
  • selected, geçerli Row değerinin selectedOption durumuna göre seçili olup olmadığını gösterir.
  • onClick lambda işlevi, Row tıklandığında selectedOption durumunu tıklanan seçenekle günceller.
  • role = Role.RadioButton, erişilebilirlik hizmetlerine Row'un radyo düğmesi olarak işlev gördüğünü bildirir.
• RadioButton(...), RadioButton bileşenini oluşturur.
  • RadioButton üzerindeki onClick = null erişilebilirliği iyileştirir. Bu, radyo düğmesinin tıklama etkinliğini doğrudan işlemesini önler ve Row'nin selectable değiştiricisinin seçim durumunu ve erişilebilirlik davranışını yönetmesine olanak tanır.

Sonuç

Ek kaynaklar

• Materyal Tasarım: Düğmeler