Wechseln

Mit der Komponente Switch können Nutzer zwischen zwei Status wechseln: „Aktiviert“ und „Deaktiviert“. 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 Ziehpunkt und der Spur. Der Thumb ist der ziehbare Teil des Schalters und der Track 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 das Häkchen zu setzen oder zu entfernen.

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

Einfache Implementierung

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

  • checked: Der ursprüngliche Status 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 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

So sieht die Implementierung aus, wenn das Kästchen nicht angeklickt ist:

Ein einfacher Schalter, der nicht aktiviert ist.
Abbildung 2. Ein nicht ausgewähltes Ein/Aus-Schaltfeld.

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 komplexeren Schalters verwenden können, sind die folgenden:

  • thumbContent: Hiermit können Sie das Aussehen des Thumbnails anpassen, wenn es ausgewählt ist.
  • colors: Damit können Sie die Farbe des Tracks und des Thumb anpassen.

Benutzerdefiniertes Thumbnail

Sie können für den Parameter thumbContent ein beliebiges Composable übergeben, um ein benutzerdefiniertes Vorschaubild zu erstellen. Das folgende Beispiel zeigt einen Schalter, für den ein benutzerdefiniertes Symbol für den Thumb verwendet wird:

@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 sieht das nicht markierte Feld genauso aus wie im Beispiel im vorherigen Abschnitt. Wenn sie jedoch aktiviert ist, sieht die Implementierung so aus:

Ein Schalter, der mit dem Parameter „thumbContent“ ein benutzerdefiniertes Symbol anzeigt, wenn er aktiviert ist.
Abbildung 4: Ein Schalter mit einem benutzerdefinierten Symbol für „Aktiviert“.

Benutzerdefinierte Farben

Im folgenden Beispiel wird gezeigt, wie Sie mit dem Parameter „colors“ die Farbe des Schalters und des Hintergrunds ä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 den Schalterknopf und die Schalterfläche darzustellen.
Abbildung 5. Ein Schalter mit benutzerdefinierten Farben.

Zusätzliche Ressourcen