Wechseln

Mit der Komponente Switch können Nutzer zwischen zwei Status wechseln: „Aktiviert“ und nicht ausgewählt. In Ihrer App können Sie einen Schalter verwenden, damit Nutzer eine der Folgendes:

  • 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 ziehbar und der Track ist der Hintergrund. Der Nutzer kann den Daumen ziehen. nach links oder rechts, um den Status des Schalters zu ändern. Sie können auch auf das um sie zu prüfen und zu löschen.

<ph type="x-smartling-placeholder">
</ph> 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. Folgendes sind einige wichtige Parameter an, die Sie möglicherweise verwenden müssen:

  • checked: Der Ausgangsstatus des Schalters.
  • onCheckedChange: Ein Callback, der aufgerufen wird, wenn der Status des Änderungen zu wechseln.
  • 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:

<ph type="x-smartling-placeholder">
</ph> Ein einfacher Schalter, der nicht ausgewählt ist.
Abbildung 2: Ein deaktivierter Schalter.

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

<ph type="x-smartling-placeholder">
</ph> Ein einfacher Switch, der aktiviert ist.
Abbildung 3: Ein Schalter mit Häkchen

Erweiterte Implementierung

Die primären Parameter, die Sie bei der Implementierung eines erweiterten sind folgende:

  • thumbContent: Hiermit können Sie das Aussehen des Daumens anpassen, wenn Sie dass die Option aktiviert 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 hoch. Hier sehen Sie ein Beispiel für einen Schalter, bei dem ein benutzerdefiniertes Symbol Daumen:

@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 ungeprüfte Erscheinungsbild dem Beispiel in im vorherigen Abschnitt. Wenn diese Option aktiviert ist, wird diese Implementierung jedoch wie folgt angezeigt: folgt:

<ph type="x-smartling-placeholder">
</ph> 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“ Farbe von Daumen und Track eines Schalters ändern und dabei berücksichtigen, 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:

<ph type="x-smartling-placeholder">
</ph> 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

Weitere Informationen