Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant Switch permet aux utilisateurs de basculer entre deux états: coché et non coché. Utilisez un bouton pour permettre à l'utilisateur d'effectuer l'une des opérations suivantes:
Activez ou désactivez un paramètre.
Activez ou désactivez une fonctionnalité.
Sélectionnez une option.
Le composant se compose de deux parties: le curseur et le rail. Le bouton est la partie du bouton qui peut être déplacée, et le rail est l'arrière-plan. L'utilisateur peut faire glisser le curseur vers la gauche ou vers la droite pour modifier l'état du bouton. Ils peuvent également appuyer sur le bouton pour le cocher et le décocher.
Compatibilité des versions
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Implémenter un bouton bascule
L'exemple suivant est une implémentation minimale du composable Switch:
Résultats
Figure 1. Un bouton bascule non cochéFigure 2. Bouton bascule activé.
Créer une miniature personnalisée
Vous pouvez transmettre n'importe quel composable pour le paramètre thumbContent afin de créer un curseur personnalisé. Voici un exemple de bouton qui utilise une icône personnalisée pour son curseur:
Résultats
L'apparence de la case non cochée est identique à celle de l'exemple de la section précédente. Toutefois, lorsque vous la vérifiez, cette implémentation se présente comme suit:
Figure 3. Un bouton avec une icône cochée personnalisée.
Utiliser des couleurs personnalisées
Utilisez le paramètre colors pour modifier la couleur du curseur et du rail d'un bouton, en tenant compte de l'état de ce bouton.
Résultats
Figure 4. Un bouton avec des couleurs personnalisées.
Points essentiels
Paramètres de base:
checked: état initial du commutateur.
onCheckedChange: rappel appelé lorsque l'état du bouton bascule change.
enabled: indique si le bouton est activé ou désactivé.
colors: couleurs utilisées pour le bouton.
Paramètres avancés
thumbContent: permet de personnaliser l'apparence du curseur lorsqu'il est coché.
colors: permet de personnaliser la couleur du canal et du curseur.
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Afficher des composants interactifs
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/05/08 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)"]]
