Wechseln

Mit der Komponente Switch können Nutzer zwischen zwei Zuständen wechseln: angeklickt und nicht angeklickt. 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 Schieberegler und dem Track. Der Schieberegler ist der bewegliche 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 ihn zu überprüfen und zu löschen.

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 anfängliche Status des Schalters.
• onCheckedChange: Ein Rückruf, 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 des Switch-Kompositionstyps.

@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:

Abbildung 2: Ein Kästchen ohne Häkchen.

So sieht es aus, wenn die Option aktiviert ist:

Abbildung 3: Ein angeklickter Schalter.

Erweiterte Implementierung

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

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

Benutzerdefiniertes Thumbnail

Du kannst einen beliebigen Composeable-Parameter für den Parameter thumbContent übergeben, um einen benutzerdefinierten Thumbnail 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
        }
    )
}
Switch.kt

In dieser Implementierung entspricht das Erscheinungsbild der Option, wenn sie deaktiviert ist, dem Beispiel im vorherigen Abschnitt. Wenn Sie diese Option aktivieren, wird diese Implementierung jedoch so angezeigt:

Abbildung 4: Ein Schalter mit einem benutzerdefinierten Häkchensymbol.

Benutzerdefinierte Farben

Im folgenden Beispiel wird gezeigt, wie Sie mit dem Parameter „colors“ die Farbe des Schiebereglers und des Schiebewegs ä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,
        )
    )
}
Switch.kt

Diese Implementierung sieht so aus:

Abbildung 5. Ein Schalter mit benutzerdefinierten Farben.

Weitere Informationen

• Material UI-Dokumente