Wechseln

Mit der Komponente Switch können Nutzer zwischen zwei Status wechseln: aktiviert und deaktiviert. In Ihrer Anwendung können Sie einen Schalter verwenden, damit Nutzer eine der folgenden Aktionen ausführen können:

  • Aktivieren oder deaktivieren Sie eine Einstellung.
  • Aktivieren oder deaktivieren Sie eine Funktion.
  • Wählen Sie eine Option aus.

Die Komponente besteht aus zwei Teilen: dem Daumen und dem Track. Der Daumen ist der ziehbare Teil des Schalters und der Track als Hintergrund. Sie können den Daumen nach links oder rechts ziehen, um den Status des Schalters zu ändern. Sie können auch auf den Schalter tippen, um ihn zu überprüfen und zu löschen.

Beispiele für die Komponente „Wechsel“ im hellen und dunklen Modus
Abbildung 1. Die Schalterkomponente.

Einfache Implementierung

Eine vollständige API-Definition finden Sie in der Referenz zu Switch. Im Folgenden sind einige der wichtigsten Parameter aufgeführt, die Sie möglicherweise verwenden müssen:

  • checked: Der Ausgangsstatus des Schalters.
  • onCheckedChange: Ein Callback, der aufgerufen wird, wenn sich der Status des Switches ändert.
  • enabled: Gibt an, ob der Schalter aktiviert oder deaktiviert ist.
  • colors: Die für den Schalter verwendeten Farben.

Das folgende Beispiel zeigt eine minimale Implementierung der zusammensetzbaren Funktion Switch.

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

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

Wenn kein Häkchen gesetzt ist, wird die Implementierung folgendermaßen angezeigt:

Ein einfacher Schalter, der nicht ausgewählt ist.
Abbildung 2: Ein deaktivierter Schalter.

Wenn ein Häkchen gesetzt ist, sieht dies so aus:

Ein einfacher Switch, der aktiviert ist.
Abbildung 3: Ein Schalter mit Häkchen

Erweiterte Implementierung

Die folgenden Hauptparameter, die Sie bei der Implementierung eines erweiterten Switches verwenden können, sind:

  • thumbContent: Hiermit kannst du die Darstellung des Daumens anpassen, wenn das Kästchen angeklickt ist.
  • colors: Hiermit kannst du die Farbe des Tracks und des Thumbnails anpassen.

Benutzerdefinierter Daumen

Sie können eine beliebige zusammensetzbare Funktion für den Parameter thumbContent übergeben, um einen benutzerdefinierten Daumen zu erstellen. Das folgende Beispiel zeigt einen Schalter, der ein benutzerdefiniertes Symbol als Daumen verwendet:

@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

In dieser Implementierung entspricht die deaktivierte Darstellung dem Beispiel im vorherigen Abschnitt. Wenn das Häkchen gesetzt ist, wird diese Implementierung jedoch so angezeigt:

Ein Schalter, bei dem mithilfe des Parameters „thumbContent“ ein benutzerdefiniertes Symbol angezeigt wird, wenn ein Häkchen gesetzt ist.
Abbildung 4: Ein Schalter mit einem benutzerdefinierten Häkchensymbol.

Benutzerdefinierte Farben

Das folgende Beispiel zeigt, wie Sie mit dem Parameter „colors“ die Farbe von Daumen und Track eines Schalters ändern können. Dabei wird berücksichtigt, ob der Schalter aktiviert ist.

@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

Diese Implementierung sieht so aus:

Ein Schalter, der den Parameter „colors“ verwendet, um einen Schalter mit benutzerdefinierten Farben für „thumb“ und „tack“ anzuzeigen.
Abbildung 5. Ein Schalter mit benutzerdefinierten Farben

Zusätzliche Ressourcen