Geç

Switch bileşeni, kullanıcıların iki durum arasında geçiş yapmasına olanak tanır: işaretli ve işaretli değil. Uygulamanızda bir anahtar kullanarak kullanıcının aşağıdakilerden birini yapmasını sağlayabilirsiniz:

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

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

Açık ve 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.
  • enabled: Anahtarın etkin mi yoksa devre dışı mı olduğunu belirtir.
  • colors: Anahtar için kullanılan renkler.

Aşağıdaki örnek, Switch composable'ın minimal kullanımıdır.

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

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

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

İşareti kaldırılmış temel bir anahtar.
Şekil 2. İşaretlenmemiş bir anahtar.

İşaretlendiğinde şöyle görünür:

İşaretlenmiş temel bir Anahtar.
Şekil 3. İşaretlenmiş bir anahtar.

Gelişmiş uygulama

Daha gelişmiş bir anahtar uygularken kullanmak isteyebileceğiniz birincil parametreler şunlardır:

  • thumbContent: İşaretlendiğinde başparmağın görünümünü özelleştirmek için bunu kullanın.
  • colors: Parçanın ve başparmağın rengini özelleştirmek için bunu kullanın.

Özel baş parmak

Özel küçük resim oluşturmak amacıyla thumbContent parametresi için herhangi bir composable'ı 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şaretlenmemiş görünüm, önceki bölümde verilen örnekle aynıdır. Ancak, bu uygulama işaretlendiğinde şu şekilde 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 simgesi olan bir anahtar.

Özel renkler

Aşağıdaki örnekte, anahtarın işaretli olup olmadığını dikkate alarak bir anahtarın başparmağı ve izi rengini değiştirmek için renkler 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 grup için özel renkler içeren bir anahtar görüntülemek üzere renkler parametresini kullanan bir anahtar.
Şekil 5. Özel renklere sahip bir anahtar.

Ek kaynaklar