Karta

Kompozycja Card działa jako kontener Material Design dla interfejsu. Karty zwykle zawierają jedną spójną treść. Oto kilka przykładów, 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.

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 element Card zawiera wywołanie elementu Text:

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

Zaawansowane implementacje

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 do komponentu cień, który sprawia, że 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 działania użytkownika.
• onClick: zwykle Card nie akceptuje zdarzeń kliknięcia. Dlatego głównym przeciążeniem, na które warto zwrócić uwagę, jest to, które definiuje parametr onClick. Użyj tego przeciążenia, jeśli chcesz, aby implementacja Card reagowała na naciśnięcia użytkownika.

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

Wypełniona karta

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

Kluczem 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,
        )
    }
}
Card.kt

Ta implementacja wygląda tak:

Karta podniesiona

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

Za pomocą właściwości elevation możesz kontrolować wygląd podniesienia 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 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,
        )
    }
}
Card.kt

Ta implementacja wygląda tak:

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

• Dokumentacja Material UI