Karta

Komponent Card działa jako kontener Material Design dla interfejsu. Karty zwykle zawierają jeden spójny element treści. Oto kilka przykładów zastosowań kart:

  • Produkt w aplikacji zakupowej.
  • Artykuł w aplikacji do przeglądania wiadomości.
  • wiadomość w aplikacji do komunikacji;

Wyróżnia je to, że skupiają się na przedstawieniu pojedynczego elementu treści.Card Na przykład Scaffold zapewnia ogólną strukturę całego ekranu. Karta jest zwykle mniejszym elementem interfejsu użytkownika w większym układzie, podczas gdy komponent układu, taki jak Column lub Row, zapewnia prostszy i bardziej ogólny interfejs API.

Podniesiona karta z tekstem i ikonami.
Rysunek 1. Przykład karty z tekstem i ikonami.

Implementacja podstawowa

Card działa podobnie jak inne kontenery w Compose. Deklarujesz jego zawartość, wywołując inne komponenty w ramach tego komponentu. Na przykład w tym minimalnym przykładzie funkcja Card zawiera wywołanie funkcji Text:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Zaawansowane implementacje

Definicję interfejsu API Card znajdziesz w dokumentacji. Określa on kilka parametrów, które umożliwiają dostosowywanie wyglądu i zachowania komponentu.

Oto kilka najważniejszych parametrów:

  • elevation: dodaje cień do komponentu, dzięki któremu wygląda on na wystający ponad tło.
  • colors: używa typu CardColors do ustawienia domyślnego koloru zarówno kontenera, jak i wszystkich 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 funkcji, jeśli chcesz, aby implementacja funkcji Card reagowała na naciśnięcia przez użytkownika.

Ten przykład pokazuje, jak można używać tych parametrów oraz innych popularnych parametrów, takich jak shape i modifier.

Wypełniona karta

Poniżej znajdziesz przykład implementacji wypełnionej karty.

Kluczowe jest tu użycie właściwości colors do zmiany koloru wypełnienia.

@Composable
fun FilledCardExample() {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant,
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Filled",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Ta implementacja wygląda tak:

Karta jest wypełniona kolorem wariantu powierzchni z motywu Material.
Rysunek 2. Przykład wypełnionej karty.

Podwyższona karta

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.

@Composable
fun ElevatedCardExample() {
    ElevatedCard(
        elevation = CardDefaults.cardElevation(
            defaultElevation = 6.dp
        ),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Elevated",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Ta implementacja wygląda tak:

Karta jest podniesiona ponad tło aplikacji i ma cień.
Rysunek 3. Przykład karty podwyższonej.

Karta z obrysem

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

@Composable
fun OutlinedCardExample() {
    OutlinedCard(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface,
        ),
        border = BorderStroke(1.dp, Color.Black),
        modifier = Modifier
            .size(width = 240.dp, height = 100.dp)
    ) {
        Text(
            text = "Outlined",
            modifier = Modifier
                .padding(16.dp),
            textAlign = TextAlign.Center,
        )
    }
}
Card.kt

Ta implementacja wygląda tak:

Karta z cienkim czarnym obramowaniem.
Rysunek 4. Przykład karty z obrysem.

Ograniczenia

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.

Dodatkowe materiały