Dodaj przełącznik, który użytkownicy mogą włączać i wyłączać
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Komponent Switch umożliwia użytkownikom przełączanie się między 2 stanami: zaznaczonym i niezaznaczonym. Użyj przełącznika, aby umożliwić użytkownikowi wykonanie jednej z tych czynności:
Włącz lub wyłącz ustawienie.
Włączanie i wyłączanie funkcji.
Wybierz opcję.
Składa się z 2 części: miniatury i ścieżki. Palec to element przeciągalny przełącznika, a ścieżka to tło. Użytkownik może przeciągnąć suwak w lewo lub w prawo, aby zmienić stan przełącznika. Może też kliknąć przełącznik, aby sprawdzić i wyczyścić ustawienia.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Przełączanie
Poniżej znajdziesz minimalną implementację kompozytu Switch:
Aby utworzyć niestandardowy miniaturę, możesz podać dowolny komponent w parametrze thumbContent. Poniżej znajdziesz przykład przełącznika, który używa niestandardowej ikony w przycisku:
Wyniki
Wygląd niezaznaczonego pola jest taki sam jak w sekcji poprzedniej. Jednak po zaznaczeniu ta implementacja wygląda tak:
Rysunek 3. Przełącznik z ikoną zaznaczonego elementu niestandardowego.
Używanie kolorów niestandardowych
Użyj parametru colors, aby zmienić kolor suwaka i ścieżki, biorąc pod uwagę to, czy suwak jest zaznaczony.
Wyniki
Rysunek 4. Przełącznik z niestandardowymi kolorami.
Najważniejsze punkty
Parametry podstawowe:
checked: początkowy stan przełącznika.
onCheckedChange: wywołanie zwrotne, które jest wywoływane, gdy zmienia się stan przełącznika.
enabled: wskazuje, czy przełącznik jest włączony czy wyłączony.
colors: kolory używane dla przełącznika.
Parametry zaawansowane
thumbContent: służy do dostosowywania wyglądu miniatury po zaznaczeniu.
colors: użyj tego, aby dostosować kolor utworu i miniatury.
Kolekcje zawierające ten przewodnik
Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:
Wyświetlanie komponentów interaktywnych
Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-05-08 UTC.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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)"]]
