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ıyan bir anahtar kullanabilirsiniz:

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

Bileşen, küçük resim ve iz olmak üzere iki bölümden oluşur. Anahtarın sürüklenebilir kısmı başparmak, arka planı ise izdir. Kullanıcı, anahtarın durumunu değiştirmek için başparmağı sola veya sağa sürükleyebilir. Ayrıca, onay kutusunu işaretlemek ve temizlemek için anahtara da dokunabilirler.

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. Aşağıda, kullanmanız gerekebilecek bazı önemli parametreler verilmiştir:

  • checked: Anahtarın başlangıç durumu.
  • onCheckedChange: Anahtarın durumu değiştiğinde çağrılan geri çağırma.
  • 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 uygulanmış halidir.

@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 anahtar.
Şekil 2. İşaretlenmemiş bir anahtar.

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

İşaretli 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: Bu özelliği, işaretlendiğinde başparmağın görünümünü özelleştirmek için kullanın.
  • colors: Parçanın ve başparmağın rengini özelleştirmek için kullanılır.

Özel başparmak

Özel bir küçük resim oluşturmak için thumbContent parametresine herhangi bir composable iletebilirsiniz. Aşağıda, başparmak 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, 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 içeren bir anahtar.

Özel renkler

Aşağıdaki örnekte, anahtarın işaretli olup olmadığını dikkate alarak anahtarın başparmağının ve izinin 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,
        )
    )
}

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

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

Ek kaynaklar