Aggiungi un'opzione che gli utenti possono attivare e disattivare
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Il componente Switch consente agli utenti di passare da uno stato all'altro: selezionato
e deselezionato. Utilizza un'opzione per consentire all'utente di eseguire una delle seguenti operazioni:
Attiva o disattiva un'impostazione.
Attiva o disattiva una funzionalità.
Seleziona un'opzione.
Il componente è composto da due parti: la miniatura e la traccia. Il cursore è la parte dell'opzione che puoi trascinare e il canale è lo sfondo. L'utente può trascinare il cursore verso sinistra o verso destra per modificare lo stato dell'opzione. Possono anche toccare l'opzione per selezionarla e deselezionarla.
Compatibilità delle versioni
Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.
Dipendenze
Implementare un'opzione
L'esempio seguente è un'implementazione minima del composable Switch:
Risultati
Figura 1. Uno switch non selezionato.Figura 2. Un'opzione selezionata.
Creare una miniatura personalizzata
Puoi passare qualsiasi composable per il parametro thumbContent per creare un'anteprima personalizzata. Di seguito è riportato un esempio di opzione che utilizza un'icona personalizzata per l'anteprima:
Risultati
L'aspetto della casella deselezionata è lo stesso dell'esempio nella sezione precedente. Tuttavia, se questa opzione è selezionata, l'implementazione viene visualizzata come segue:
Figura 3. Un'opzione con un'icona di spunta personalizzata.
Utilizzare colori personalizzati
Utilizza il parametro colors per cambiare il colore del cursore e del pulsante di un'opzione, tenendo conto dell'eventuale attivazione dell'opzione.
Risultati
Figura 4. Un'opzione con colori personalizzati.
Punti chiave
Parametri di base:
checked: lo stato iniziale dell'opzione.
onCheckedChange: un callback chiamato quando cambia lo stato dell'opzione.
enabled: indica se l'opzione è attivata o disattivata.
colors: i colori utilizzati per l'opzione.
Parametri avanzati
thumbContent: utilizza questa opzione per personalizzare l'aspetto della miniatura quando è selezionata.
colors: utilizza questo parametro per personalizzare il colore della traccia e della miniatura.
Raccolte che contengono questa guida
Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:
Mostrare componenti interattivi
Scopri come le funzioni composable possono aiutarti a creare facilmente magnifici componenti dell'interfaccia utente basati sul sistema di progettazione Material Design.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-05-08 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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)"]]
