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 anahtar kullanarak kullanıcının aşağıdakilerden birini yapmasına izin verebilirsiniz:

  • 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 parçası, parça ise arka plandır. Kullanıcı, anahtarın durumunu değiştirmek için baş parmağını sola veya sağa sürükleyebilir. Kontrol edip temizlemek için anahtara da dokunabilirler.

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. Kullanmanız gerekebilecek temel parametrelerden bazıları şunlardır:

  • checked: Anahtarın başlangıç durumu.
  • onCheckedChange: Anahtarın durumu değiştiğinde çağrılan bir geri çağırma.
  • enabled: Anahtarın etkin veya devre dışı olup olmadığı.
  • colors: Anahtar için kullanılan renkler.

Aşağıdaki örnekte, Switch composable'ın minimal bir şekilde uygulanması gösterilmektedir.

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

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

Bu uygulama, işaretlenmediğinde aşağıdaki gibi görünür:

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

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

İşaretli temel bir anahtar.
Şekil 3. İşaretli 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üşü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 bir küçük resim oluşturmak üzere thumbContent parametresi için herhangi bir composable'ı iletebilirsiniz. Aşağıda, baş parmağı için özel simge kullanan bir anahtara örnek 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ümdeki örnekle aynıdır. Ancak işaretlendiğinde bu uygulama 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 bulunan bir anahtar.

Özel renkler

Aşağıdaki örnek, anahtarın işaretli olup olmadığını göz önünde bulundurarak bir anahtarın başparmak ve izlemesinin rengini değiştirmek için renkler parametresini nasıl kullanabileceğinizi gösterir.

@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 kenet için özel renklere sahip bir anahtarı görüntülemek üzere renkler parametresini kullanan bir anahtar.
Şekil 5. Özel renklere sahip bir anahtar.

Ek kaynaklar