Geç

Switch bileşeni, kullanıcıların iki durum arasında geçiş yapmasına olanak tanır: işaretli ve işareti kaldırıldı. Uygulamanızda, kullanıcının aşağıdakilerden birini yapmasına izin vermek için anahtar kullanabilirsiniz takip etmek için:

  • Bir ayarı açın veya kapatın.
  • Bir özelliği etkinleştirin veya devre dışı bırakın.
  • Bir seçenek belirleyin.

Bileşen iki parçadan oluşur: baş parmak ve kanal. Başparmak, anahtarın sürüklenebilir kısmıdır ve parça arka plandır. Kullanıcı baş parmağını sürükleyebilir dokunun. Ayrıca kontrol edip temizlemek için anahtarı kullanın.

Hem açık hem de koyu modda geçiş bileşeni örnekleri.
Şekil 1. Anahtar bileşeni.

Temel uygulama

Tam API tanımı için Switch referansına bakın. Bu alanlar: kullanmanız gerekebilecek temel parametrelerden bazıları şunlardır:

  • checked: Anahtarın başlangıç durumu.
  • onCheckedChange: anahtar değişiklikleri.
  • enabled: Anahtarın etkin veya devre dışı olup olmadığı.
  • colors: Anahtar için kullanılan renkler.

Aşağıdaki örnek, Switch bileşeninin minimum düzeyde uygulanmış halidir.

@Composable
fun SwitchMinimalExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        }
    )
}
Switch.kt

Bu uygulama, onay kutusunun işareti kaldırıldığında aşağıdaki gibi görünür:

İşaretlenmemiş temel bir anahtar.
Şekil 2. İşaretlenmemiş bir anahtar.

İşaretlendiğinde görünüm şu şekildedir:

Kontrol edilen temel bir anahtar.
Şekil 3. İşaretli bir anahtar.

Gelişmiş uygulama

Daha gelişmiş bir dönüşüm izleme sürecinde kullanmak isteyebileceğiniz birincil parametreler şunlardır:

  • thumbContent: İşaretliyken küçük resmin görünümünü özelleştirmek için kullanın.
  • colors: Parçanın ve küçük resmin rengini özelleştirmek için kullanın.

Özel baş parmak

Özel bir küçük resim oluşturmak için thumbContent parametresi için herhangi bir derlenebilir öğe iletebilirsiniz. Aşağıda, küçük resmi için özel simge kullanan bir anahtar örneği verilmiştir:

@Composable
fun SwitchWithIconExample() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        thumbContent = if (checked) {
            {
                Icon(
                    imageVector = Icons.Filled.Check,
                    contentDescription = null,
                    modifier = Modifier.size(SwitchDefaults.IconSize),
                )
            }
        } else {
            null
        }
    )
}
Switch.kt

Bu uygulamada, işaretli olmayan görünüm önceki bölümdeki örnekle aynıdır. Ancak bu uygulama, kontrol edildiğinde aşağıdaki gibi görünür:

İşaretlendiğinde özel bir simge görüntülemek için thumbContent parametresini kullanan bir anahtar.
Şekil 4. Özel onaylanmış simgesi olan bir anahtar.

Özel renkler

Aşağıdaki örnekte, anahtarın işaretli olup olmadığını dikkate alarak anahtarın düğmesinin ve kaydırma çubuğunun rengini değiştirmek için colors parametresini nasıl kullanabileceğiniz gösterilmektedir.

@Composable
fun SwitchWithCustomColors() {
    var checked by remember { mutableStateOf(true) }

    Switch(
        checked = checked,
        onCheckedChange = {
            checked = it
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = MaterialTheme.colorScheme.primary,
            checkedTrackColor = MaterialTheme.colorScheme.primaryContainer,
            uncheckedThumbColor = MaterialTheme.colorScheme.secondary,
            uncheckedTrackColor = MaterialTheme.colorScheme.secondaryContainer,
        )
    )
}
Switch.kt

Bu uygulama aşağıdaki gibi görünür:

Hem başparmak hem de raptiye için özel renklere sahip bir anahtar görüntülemek üzere colors parametresini kullanan bir anahtar.
Şekil 5. Özel renklere sahip bir anahtar.

Ek kaynaklar