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">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 } ) }
Wenn kein Häkchen gesetzt ist, wird die Implementierung folgendermaßen angezeigt:
<ph type="x-smartling-placeholder">Wenn ein Häkchen gesetzt ist, sieht dies so aus:
<ph type="x-smartling-placeholder">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 } ) }
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">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, ) ) }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">