Geç

Switch bileşeni, kullanıcıların işaretli ve işaretsiz olmak üzere iki durum arasında geçiş yapmasına olanak tanır. Uygulamanızda, kullanıcının aşağıdakilerden birini yapmasına izin vermek için bir anahtar kullanabilirsiniz:

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

Bileşenin iki bölümü vardır: küçük resim ve parça. Başparmak, anahtarın sürüklenebilir kısmıdır ve kanal arka plandır. Kullanıcı, anahtarın durumunu değiştirmek için başparmağı sola veya sağa sürükleyebilir. Ayrıca, anahtara dokunarak da bu ayarı kontrol edip temizleyebilirler.

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

Temel uygulama

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

  • checked: Anahtarın ilk durumu.
  • onCheckedChange: Anahtarın durumu değiştiğinde çağrılan bir geri çağırma işlevi.
  • enabled: Anahtarın etkin veya devre dışı olup olmadığını belirtir.
  • 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 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 geçiş uygularken 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 küçük resim

Özel bir küçük resim oluşturmak için thumbContent parametresi için herhangi bir birleştirilebilir öğ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 işaretli simge içeren 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