Karta

Funkcja kompozycyjna Card działa jako kontener Material Design dla interfejsu. Karty zwykle zawierają pojedynczy, spójny element treści. Oto przykłady, w których możesz użyć karty:

  • Produkt w aplikacji zakupowej.
  • Artykuł w aplikacji z wiadomościami.
  • wiadomość w aplikacji do komunikacji,

Skupienie się na przedstawieniu pojedynczego elementu treści odróżnia Card od innych kontenerów. Na przykład Scaffold prezentuje ogólną strukturę całego ekranu. Karta jest zwykle mniejszym elementem interfejsu w większym układzie, a komponent układu, taki jak Column lub Row, oferuje 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 w nim inne funkcje kompozycyjne. Na przykład w tym krótkim przykładzie Card zawiera wywołanie Text:

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

Implementacje zaawansowane

Definicję interfejsu API Card znajdziesz w dokumentacji. Określa ona kilka parametrów, które pozwalają dostosować wygląd i działanie komponentu.

Warto zwrócić uwagę na kilka kluczowych parametrów:

  • elevation: dodaje cień do komponentu, dzięki czemu wydaje się on uniesiony nad tłem.
  • colors: używa typu CardColors do ustawienia domyślnego koloru kontenera i wszystkich elementów podrzędnych.
  • enabled: jeśli przekażesz wartość false dla tego parametru, karta będzie wyświetlana jako wyłączona i nie będzie reagować na dane wejściowe użytkownika.
  • onClick: zwykle element Card nie akceptuje zdarzeń kliknięcia. Dlatego główne przeciążenie, na które warto zwrócić uwagę, to to, które definiuje parametr onClick. Użyj tego przeciążenia, jeśli chcesz, aby implementacja Card reagowała na naciśnięcia przez użytkownika.

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

Wypełniona karta

Poniżej znajdziesz przykład, jak możesz wdrożyć kartę z wypełnieniem.

Kluczowe jest tutaj 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,
        )
    }
}

Implementacja wygląda tak:

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

Karta podniesiona

Poniższy fragment kodu pokazuje, jak wdrożyć kartę z efektem podniesienia. Użyj specjalnego komponentu ElevatedCard.

Możesz użyć właściwości elevation, aby kontrolować wygląd wysokości i wynikowego 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,
        )
    }
}

Implementacja wygląda tak:

Karta jest uniesiona nad tło aplikacji i rzuca cień.
Rysunek 3. Przykład karty z cieniem.

Karta z konturem

Poniżej znajdziesz przykład karty z obrysem. Użyj specjalnego 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,
        )
    }
}

Implementacja wygląda tak:

Karta jest otoczona cienką czarną ramką.
Rysunek 4. Przykład karty z obrysem.

Ograniczenia

Karty nie mają wbudowanych funkcji przewijania ani zamykania, ale można je zintegrować z funkcjami kompozycyjnymi, które je oferują. Aby na przykład wdrożyć gest przesuwania w celu zamknięcia karty, zintegruj ją z funkcją kompozycyjną SwipeToDismiss. Aby zintegrować przewijanie, użyj modyfikatorów przewijania, takich jak verticalScroll. Więcej informacji znajdziesz w dokumentacji dotyczącej przewijania.

Dodatkowe materiały