Tworzenie elementu reprezentującego złożone elementy
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Komponent Chip to kompaktowy, interaktywny element interfejsu. Reprezentują one złożone elementy, takie jak kontakty lub tagi, często z ikoną i etykietą. Może być zaznaczany, usuwany lub klikalny.
Oto 5 rodzajów komponentów i miejsca, w których możesz ich używać:
Pomoc: prowadzi użytkownika podczas wykonywania zadania. Często pojawia się jako tymczasowy element interfejsu w odpowiedzi na dane wejściowe użytkownika.
Filtr: pozwala użytkownikom dostosować treści z zestawu opcji. Można je zaznaczać i odznaczać, a w przypadku zaznaczenia mogą zawierać ikonę znacznika wyboru.
Wejście: reprezentuje informacje podawane przez użytkownika, takie jak wybory w menu. Mogą zawierać ikonę i tekst oraz przycisk „X” do usunięcia.
Sugestia: wyświetla użytkownikowi rekomendacje na podstawie jego ostatniej aktywności lub danych wejściowych. Zazwyczaj pojawiają się pod polem wprowadzania danych, aby zachęcić użytkownika do podjęcia działania.
Elevated (podniesiony): ma podniesiony wygląd zamiast płaskiego.
Zgodność wersji
Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.
Zależności
Tworzenie elementu pomocy
Komponent AssistChip to prosty sposób na tworzenie elementów pomocy, które kierują użytkownika w określonym kierunku. Jedną z takich funkcji jest parametr leadingIcon, który umożliwia wyświetlanie ikony po lewej stronie elementu, jak pokazano na rysunku 1. Ten przykład pokazuje, jak to zrobić:
Rysunek 1. Element załącznika.
Tworzenie elementu prowadzącego do filtra
Komponent FilterChip wymaga śledzenia, czy element jest wybrany. W tym przykładzie pokazujemy, jak wyświetlić ikonę zaznaczonego elementu tylko wtedy, gdy użytkownik go wybierze:
Wyniki
Rysunek 2. Niewybrana ikona filtra.Rysunek 3. Wybrany element filtra.
Tworzenie elementu danych wejściowych
Możesz użyć komponentu InputChip, aby tworzyć elementy, które są wynikiem interakcji z użytkownikiem. Na przykład w kliencie poczty, gdy użytkownik pisze e-maila, element wejściowy może reprezentować osobę, której adres został wpisany w polu „do:”.
Poniższa implementacja pokazuje element interfejsu, który jest w wybranym stanie. Użytkownik odrzuca element, gdy go naciśnie.
Wyniki
Rysunek 4. Element wprowadzania tekstu.
Tworzenie elementu z sugestia
Komponent SuggestionChip jest najprostszym z wymienionych na tej stronie, zarówno pod względem definicji interfejsu API, jak i typowych zastosowań. Elementy sugestii zawierają dynamicznie generowane wskazówki. Na przykład w aplikacji do czatu z AI możesz używać elementów z supozycjami, aby przedstawiać możliwe odpowiedzi na najnowszą wiadomość.
Rozważ implementację SuggestionChip:
Wyniki
Rysunek 5. Element załącznika.
Tworzenie elementu podniesionego
Wszystkie przykłady w tym dokumencie wykorzystują podstawowe komponenty, które mają płaski wygląd. Jeśli chcesz użyć elementu, który ma podwyższoną pozycję, użyj jednego z tych 3 komponentów:
4 elementy składane odpowiadają 4 typom komponentów i mają te same parametry:
label: ciąg znaków wyświetlany na chipie.
icon: ikona wyświetlana na początku elementu. Niektóre elementy kompozycyjne mają oddzielne parametry leadingIcon i trailingIcon.
onClick: funkcja Lambda wywoływana przez element, gdy użytkownik kliknie go.
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-02-06 UTC.
[null,null,["Ostatnia aktualizacja: 2025-02-06 UTC."],[],[],null,["\u003cbr /\u003e\n\nThe `Chip` component is a compact, interactive UI element. It represents complex\nentities like a contact or tag, often with an icon and label. It can be\ncheckable, dismissible, or clickable.\n\nThe five types of chips and where you might use them are as follows:\n\n- [Assist](#assist): Guides the user during a task. Often appears as a temporary UI element in response to user input.\n- [Filter](#filter): Lets users refine content from a set of options. They can be selected or deselected, and may include a checkmark icon when selected.\n- [Input](#input): Represents user-provided information, such as selections in a menu. They can contain an icon and text, and provide an 'X' for removal.\n- [Suggestion](#suggestion): Provides recommendations to the user based on their recent activity or input. Typically appear beneath an input field to prompt user actions.\n- [Elevated](#elevated): Has an elevated appearance instead of looking flat.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an assist chip\n\nThe [`AssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#AssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable provides a straightforward way to create an\nassist chip that nudges the user in a particular direction. One distinguishing\nfeature is its `leadingIcon` parameter that lets you display an icon on the left\nside of the chip, as shown in figure 1. The following example demonstrates how\nyou can implement it:\n**Figure 1.** Assist chip.\n\nCreate a filter chip\n\nThe [`FilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#FilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable requires you to track whether or not the chip\nis selected. The following example demonstrates how you can show a leading\nchecked icon only when the user has selected the chip:\n\nResults **Figure 2.** Unselected filter chip. **Figure 3.** Selected filter chip.\n\nCreate an input chip\n\nYou can use the [`InputChip`](/reference/kotlin/androidx/compose/material3/package-summary#InputChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable to create chips that result from\nuser interaction. For example, in an email client, when the user is writing an\nemail, an input chip might represent a person whose address the user has entered\ninto the \"to:\" field.\n\nThe following implementation demonstrates an input chip that is in a selected\nstate. The user dismisses the chip when they press it.\n| **Note:** Consider how you might use a chip like this in the preceding email use case, with a name passed in for the `text` parameter, and a function that performs the necessary network calls for `onDismiss`.\n\nResults **Figure 4.** Input chip.\n\nCreate a suggestion chip\n\nThe [`SuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable is the most basic of the composables listed\non this page, both in its API definition and its common use cases. Suggestion\nchips present dynamically generated hints. For example, in an AI chat app, you\nmight use suggestion chips to present possible responses to the most recent\nmessage.\n\nConsider this implementation of `SuggestionChip`:\n\nResults **Figure 5.** Assist chip. **Note:** Although the suggestion chip component is intended for informational purposes, it does still take an `onClick` lambda that you can use to create interactivity.\n\nCreate an elevated chip\n\nAll the examples in this document use the base composables that take a flat\nappearance. If you want a chip that has an elevated appearance, use one of the\nthree following composables:\n\n- [`ElevatedAssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedAssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedFilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedFilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedSuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedSuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n\nKey points\n\nFour composables correspond to the four types of chips, and they share the\nfollowing parameters:\n\n- **`label`**: The string that appears on the chip.\n- **`icon`** : The icon displayed at the start of the chip. Some composables have a separate `leadingIcon` and `trailingIcon` parameter.\n- **`onClick`**: The lambda that the chip calls when the user clicks it.\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)"]]
