Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Mit der Komponente Switch können Nutzer zwischen zwei Zuständen wechseln: angeklickt und nicht angeklickt. Mit einem Schalter kann der Nutzer Folgendes tun:
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 die Option zu aktivieren oder zu deaktivieren.
Versionskompatibilität
Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.
Abhängigkeiten
Schalter implementieren
Das folgende Beispiel ist eine minimale Implementierung des Switch-Kompositions-Elements:
Ergebnisse
Abbildung 1 Ein Kästchen ohne Häkchen.Abbildung 2. Ein angeklickter Schalter.
Benutzerdefiniertes Thumbnail erstellen
Du kannst einen beliebigen Composeable-Parameter für den thumbContent-Parameter übergeben, um einen benutzerdefinierten Thumbnail zu erstellen. Im folgenden Beispiel wird ein Schalter mit einem benutzerdefinierten Symbol für den Schieberegler verwendet:
Ergebnisse
Das Aussehen ohne Häkchen entspricht dem Beispiel im vorherigen Abschnitt. Wenn Sie diese Option aktivieren, wird diese Implementierung jedoch so angezeigt:
Abbildung 3 Ein Schalter mit einem benutzerdefinierten Häkchensymbol.
Benutzerdefinierte Farben verwenden
Mit dem Parameter colors können Sie die Farbe des Schiebereglers und des Schiebewegs ändern. Dabei wird berücksichtigt, ob der Schalter aktiviert ist.
Ergebnisse
Abbildung 4: Ein Schalter mit benutzerdefinierten Farben.
Wichtige Fakten
Grundlegende Parameter:
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.
Erweiterte Parameter
thumbContent: Hiermit können Sie das Aussehen des Thumbnails anpassen, wenn es ausgewählt ist.
colors: Hiermit kannst du die Farbe des Titels und des Thumbnails anpassen.
Sammlungen, die diesen Leitfaden enthalten
Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:
Interaktive Komponenten anzeigen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-05-08 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-05-08 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nThe [`Switch`](/reference/kotlin/androidx/compose/material3/package-summary#Switch(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Boolean,androidx.compose.material3.SwitchColors,androidx.compose.foundation.interaction.MutableInteractionSource)) component lets users toggle between two states: checked\nand unchecked. Use a switch to let the user to do one of the\nfollowing:\n\n- Toggle a setting on or off.\n- Enable or disable a feature.\n- Select an option.\n\nThe component has two parts: the thumb and the track. The thumb is the draggable\npart of the switch, and the track is the background. The user can drag the thumb\nto the left or right to change the state of the switch. They can also tap the\nswitch to check and clear it.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nImplement a switch\n\nThe following example is a minimal implementation of the `Switch` composable:\n\nResults **Figure 1.** An unchecked switch. **Figure 2.** A checked switch.\n\nCreate a custom thumb\n\nYou can pass any composable for the `thumbContent` parameter to create a custom\nthumb. The following is an example of a switch that uses a custom icon for its\nthumb:\n\nResults\n\nThe unchecked appearance is the same as the example in\nthe preceding section. However, when checked, this implementation appears as\nfollows:\n**Figure 3.** A switch with a custom checked icon.\n\nUse custom colors\n\nUse the `colors` parameter to\nchange the color of a switch's thumb and track, taking into account whether the\nswitch is checked.\n\nResults **Figure 4.** A switch with custom colors.\n\nKey points\n\n- Basic parameters:\n\n - **`checked`**: The initial state of the switch.\n - **`onCheckedChange`**: A callback that is called when the state of the switch changes.\n - **`enabled`**: Whether the switch is enabled or disabled.\n - **`colors`**: The colors used for the switch.\n- Advanced parameters\n\n - **`thumbContent`**: Use this to customize the appearance of the thumb when it is checked.\n - **`colors`**: Use this to customize the color of the track and thumb.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
