Karta

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

  • Produkt w aplikacji zakupowej.
  • Wiadomość w aplikacji z wiadomościami.
  • Wiadomość w aplikacji do komunikacji.

Wyróżnia je to, że skupiają się na przedstawieniu pojedynczego elementu treści.Card Na przykład Scaffold określa 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!")
    }
}

Implementacje zaawansowane

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

Oto kilka najważniejszych parametrów:

  • elevation: dodaje do komponentu cień, dzięki czemu jego element jest wyniesiony nad tłem.
  • 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 przeciążenie definiujące parametr onClick. Należy użyć tej przeciążenia, 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 materiałowego.
Rysunek 2. Przykład wypełnionej karty.

Karta podwyższona

Ten fragment kodu pokazuje, jak zaimplementować kartę z dodatkowymi uprawnieniami. Użyj przeznaczonego elementu kompozycyjnego 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 konturem

Poniżej znajdziesz przykład karty z obrysem. Użyj dedykowanej funkcji kompozycyjnej 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 obrysowanej karty.

Ograniczenia

Karty nie mają wbudowanych działań przewijania ani odrzucania, ale można je zintegrować z komponowalnymi elementami, 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 przewijania.

Dodatkowe materiały