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 eine der folgenden Aktionen ausführen kann:

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

Die Komponente besteht aus zwei Teilen: dem Daumen und der Spur. Der Daumen ist der ziehbare Teil des Schalters, die Spur ist der Hintergrund. Der Nutzer kann 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 prüfen und zu löschen.

Abbildung 1: Die Switch-Komponente

Einfache Implementierung

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

• checked: Der Ausgangszustand des Switches.
• 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 diese Option deaktiviert ist, wird diese Implementierung so angezeigt:

Abbildung 2: Einen deaktivierten Schalter

Das ist die Darstellung, wenn diese Option aktiviert ist:

Abbildung 3: Ein aktivierter Schalter

Erweiterte Implementierung

Die wichtigsten Parameter, die Sie bei der Implementierung einer komplexeren Umstellung verwenden können, sind die folgenden:

• thumbContent: Hiermit können Sie die Darstellung des Daumens anpassen, wenn ein Häkchen gesetzt ist.
• colors: Hiermit können Sie die Farbe des Tracks und des Daumens anpassen.

Benutzerdefinierter Daumen

Sie können eine beliebige zusammensetzbare Funktion für den Parameter thumbContent übergeben, um einen benutzerdefinierten Thumb zu erstellen. Das folgende Beispiel zeigt einen Schalter, bei dem für seinen Daumen ein benutzerdefiniertes Symbol 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 entspricht die ungeprüfte Darstellung dem Beispiel im vorherigen Abschnitt. Wenn das Häkchen gesetzt ist, wird diese Implementierung jedoch so angezeigt:

Abbildung 4: Ein Schalter mit einem benutzerdefinierten Häkchensymbol

Benutzerdefinierte Farben

Das folgende Beispiel zeigt, wie Sie mit dem Parameter „colors“ die Farbe des Schalters und der Spur eines Schalters ändern können. Dabei wird berücksichtigt, ob der Schalter ausgewählt 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 personalisierten Farben

Weitere Informationen

• Material UI-Dokumentation