Komponent Card
działa jako kontener Material Design dla interfejsu.
Karty przedstawiają jeden spójny element treści, np.:
- Produkt w aplikacji zakupowej.
- wiadomość w aplikacji do przeglądania wiadomości;
- wiadomość w aplikacji do komunikacji;
Card
różni się od innych kontenerów tym, że skupia się na przedstawieniu pojedynczego elementu treści. Na przykład Scaffold
zapewnia ogólną strukturę całego ekranu. Karta to mniejszy element interfejsu użytkownika w większym układzie, podczas gdy komponent układu, taki jak Column
lub Row
, zapewnia prostsze i bardziej ogólne API.
Z tego tematu dowiesz się, jak wdrażać 4 typy kart:
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 karty podstawowej
Card
działa podobnie jak inne kontenery w Compose. Deklarujesz jego zawartość, wywołując w nim inne komponenty. Na przykład w tym minimalnym przykładzie funkcja Card
zawiera wywołanie funkcji Text
:
Tworzenie wypełnionej karty
Kluczową kwestią jest tu użycie właściwości colors
do zmiany koloru wypełnienia:
Wyniki
![Karta jest wypełniona kolorem wariantu powierzchni z motywu Material.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?hl=pl)
Tworzenie karty z podwyższoną funkcjonalnością
Ten fragment kodu pokazuje, jak zaimplementować kartę z dodatkowymi uprawnieniami. Użyj dedykowanego komponentu ElevatedCard
.
Za pomocą właściwości elevation
możesz kontrolować wygląd wzniesienia i powstałego cienia.
Wyniki
![Karta jest podniesiona ponad tło aplikacji i ma cień.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?hl=pl)
Tworzenie obrysowanej karty
Poniżej znajdziesz przykład karty z obrysem. Użyj dedykowanego komponentu OutlinedCard
.
Wyniki
![Karta z cienkim czarnym obramowaniem.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?hl=pl)
Najważniejsze punkty
Definicję interfejsu API Card
znajdziesz w dokumentacji. Określa ona kilka parametrów, których możesz użyć do dostosowania wyglądu i działania komponentu.
Do najważniejszych parametrów należą:
elevation
: dodaje cień do komponentu, dzięki któremu wygląda on na wyniesiony ponad tło.colors
: używa typuCardColors
do ustawienia domyślnego koloru zarówno kontenera, jak i jego elementów.enabled
: jeśli w przypadku tego parametru podasz wartośćfalse
, karta będzie wyglądać jak wyłączona i nie będzie reagować na działania użytkownika.onClick
: zazwyczajCard
nie akceptuje zdarzeń kliknięcia. Dlatego należy zwrócić uwagę na główne przeciążenie, które definiuje parametronClick
. Użyj tej przeciążonej wersji, jeśli chcesz, aby implementacja funkcjiCard
reagowała na kliknięcia użytkownika.
Karty nie mają wbudowanych działań przewijania ani odrzucania, ale można je zintegrować z komponowanymi komponentami, które oferują te funkcje. Aby na przykład wdrożyć gest przesunięcia w bok, który powoduje zamknięcie karty, zintegruj go z komponentem SwipeToDismiss
. Aby zintegrować przewijanie, użyj modyfikatorów przewijania, takich jak verticalScroll
. Więcej informacji znajdziesz w dokumentacji Scroll
.
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:
![](https://developer.android.com/static/images/quick-guides/collection-illustration.png?hl=pl)