Geç

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

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

Bileşen iki bölümden oluşur: kaydırma çubuğu ve iz. Başparmak, anahtarın sürüklenebilir kısmıdır ve iz, 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 işlevi.
  • enabled: Anahtarın etkin veya devre dışı olup olmadığı.
  • colors: Anahtar için kullanılan renkler.

Aşağıdaki örnek, Switch composable'ın minimum düzeyde uygulanışını göstermektedir.

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

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

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

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

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

İş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 kaydırma çubuğunun görünümünü özelleştirmek için bunu kullanın.
  • colors: Çubuğun ve kaydırma düğmesinin rengini özelleştirmek için bunu kullanın.

Özel küçük resim

Özel bir kaydırma çubuğu oluşturmak için thumbContent parametresine herhangi bir composable iletebilirsiniz. Aşağıda, kaydırma düğmesi 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
        }
    )
}

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

İşaretlendiğinde özel bir simge göstermek 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 seçili olup olmadığını dikkate alarak anahtarın başparmağının ve kanalının 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,
        )
    )
}

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

Hem kaydırma düğmesi hem de iz için özel renkler içeren bir anahtar görüntülemek üzere colors parametresini kullanan bir anahtar.
Şekil 5. Özel renkleri olan bir anahtar.

Ek kaynaklar