Tworzenie karty jako kontenera

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.
Rysunek 1. Przykład wypełnionej karty.

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ń.
Rysunek 2. Przykład karty podwyższonej.

Tworzenie obrysowanej karty

Poniżej znajdziesz przykład karty z obrysem. Użyj dedykowanego komponentu OutlinedCard.

Wyniki

Karta z cienkim czarnym obramowaniem.
Rysunek 3. Przykład obrysowanej karty.

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 typu CardColors 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: zazwyczaj Card nie akceptuje zdarzeń kliknięcia. Dlatego należy zwrócić uwagę na główne przeciążenie, które definiuje parametr onClick. Użyj tej przeciążonej wersji, jeśli chcesz, aby implementacja funkcji Card 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:

Dowiedz się, jak funkcje składane mogą ułatwić tworzenie atrakcyjnych komponentów interfejsu użytkownika na podstawie systemu projektowania Material Design.
Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.
Najczęstsze pytania Prześlij opinię