Wechseln

Mit der Komponente Switch können Nutzer zwischen zwei Zuständen wechseln: „Ausgewählt“ und „Nicht ausgewählt“. In Ihrer App können Sie einen Schalter verwenden, mit dem der Nutzer Folgendes tun kann:

  • Aktiviere oder deaktiviere eine Einstellung.
  • Funktion aktivieren oder deaktivieren
  • Wählen Sie eine Option aus.

Die Komponente besteht aus zwei Teilen: dem Schieberegler und der Schiene. Der Schieberegler ist der ziehbare Teil des Schalters und die Spur ist der Hintergrund. Der Nutzer kann den Schieberegler nach links oder rechts ziehen, um den Status des Schalters zu ändern. Sie können auch auf den Schalter tippen, um ihn zu prüfen und zu löschen.

Beispiele für die Switch-Komponente 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 Anfangszustand des Schalters.
  • onCheckedChange: Ein Callback, der aufgerufen wird, wenn sich der Status des Schalters ändert.
  • enabled: Gibt an, ob der Schalter aktiviert oder deaktiviert ist.
  • colors: Die für den Schalter verwendeten Farben.

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

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

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

Diese Implementierung sieht so aus, wenn sie nicht ausgewählt ist:

Ein einfacher Schalter, der nicht aktiviert ist.
Abbildung 2: Ein deaktivierter Schalter.

So sieht es aus, wenn das Kästchen angeklickt ist:

Ein einfacher Schalter, der aktiviert ist.
Abbildung 3: Ein aktivierter Schalter.

Erweiterte Implementierung

Die wichtigsten Parameter, die Sie bei der Implementierung eines erweiterten Schalters verwenden können, sind:

  • thumbContent: Hiermit können Sie das Erscheinungsbild des Schiebereglers anpassen, wenn er aktiviert ist.
  • colors: Damit können Sie die Farbe der Spur und des Schiebereglers anpassen.

Benutzerdefiniertes Thumbnail

Du kannst ein beliebiges Composable für den Parameter thumbContent übergeben, um einen benutzerdefinierten Schieberegler zu erstellen. Im folgenden Beispiel wird ein Schalter mit einem benutzerdefinierten Symbol für den Schieberegler 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
        }
    )
}

In dieser Implementierung ist die Darstellung im nicht ausgewählten Zustand dieselbe wie im Beispiel im vorherigen Abschnitt. Wenn die Option jedoch aktiviert ist, sieht die Implementierung so aus:

Ein Schalter, der den Parameter „thumbContent“ verwendet, um ein benutzerdefiniertes Symbol anzuzeigen, wenn er aktiviert ist.
Abbildung 4: Ein Schalter mit einem benutzerdefinierten Symbol für den aktivierten Zustand.

Benutzerdefinierte Farben

Im folgenden Beispiel wird gezeigt, wie Sie mit dem Parameter „colors“ die Farbe des Schiebereglers und der Schiene eines Schalters ändern können, wobei berücksichtigt wird, 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,
        )
    )
}

Diese Implementierung sieht so aus:

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

Zusätzliche Ressourcen