Geç

Switch bileşeni, kullanıcıların iki durum arasında geçiş yapmasına olanak tanır: işaretli ve işareti kaldırıldı. Uygulamanızda, kullanıcının aşağıdakilerden birini yapmasına izin vermek için anahtar kullanabilirsiniz takip etmek için:

  • 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 sürüklenebilir parça, arka planın yerini alır. Kullanıcı baş parmağını sürükleyebilir dokunun. Ayrıca kontrol edip temizlemek için anahtarı kullanın.

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

  • checked: Anahtarın başlangıç durumu.
  • onCheckedChange: anahtar değişiklikleri.
  • 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 yapılandırma uygularken kullanmak isteyebileceğiniz birincil parametreler şunlardır:

  • thumbContent: Aşağıdaki durumlarda başparmağın görünümünü özelleştirmek için bu seçeneği kullanın işaretlidir.
  • colors: Parçanın ve başparmağın rengini özelleştirmek için bunu kullanın.

Özel baş parmak

Özel bir oluşturmak için thumbContent parametresi için herhangi bir composable'ı iletebilirsiniz başparmak simgesini seçin. Aşağıda, baş parmak:

@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 ele alacağız. Ancak bu uygulama işaretlendiğinde şöyle olur:

İş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 örnekte, renk parametresini şu amaçlarla nasıl kullanabileceğiniz gösterilmektedir: bir anahtarın başparmak ve izin renginin rengini, anahtarı işaretli olduğundan emin olun.

@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