Karta

Komponent Card działa jako kontener Material Design dla interfejsu. Zazwyczaj karty wyświetlają jeden spójny fragment treści. Oto kilka przykładów miejsc, w których można użyć karty:

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

Skupia się na przedstawieniu jednego elementu treści, który odróżnia Card od innych kontenerów. Na przykład Scaffold zapewnia ogólną strukturę całego ekranu. Karta jest zwykle mniejszym elementem interfejsu w większym układzie, natomiast komponent układu, taki jak Column lub Row, to prostszy i bardziej ogólny interfejs API.

Podniesiona karta z tekstem i ikonami.
Rysunek 1. Przykład karty zawierającej tekst i ikony.

Implementacja podstawowa

Card działa podobnie jak inne kontenery w Compose. Deklarujesz treść, wywołując w niej inne elementy kompozycyjne. 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 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. W związku z tym główne przeciążenie, które warto zauważyć, to definicja parametru onClick. Należy użyć tej przeciążenia, jeśli chcesz, aby implementacja funkcji Card reagowała na naciśnięcia przez użytkownika.

Poniższy przykład pokazuje, jak możesz korzystać z tych parametrów, a także innych typowych parametrów, np. shape i modifier.

Wypełniona karta

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

Kluczowe jest tutaj wykorzystanie właściwości colors do zmiany wypełnionego koloru.

@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

Implementacja wygląda tak:

Karta jest wypełniona kolorem wariantu powierzchni z motywu materiałowego.
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

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 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 oznaczonej 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 przeprowadzić integrację z przewijaniem, używaj modyfikatorów przewijania, takich jak verticalScroll. Więcej informacji znajdziesz w dokumentacji Scroll.

Dodatkowe materiały