Karta

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

• Produkt w aplikacji zakupowej.
• Wiadomość w aplikacji informacyjnej.
• 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. Jej zawartość deklarujesz, wywołując w niej inne komponenty. Na przykład w tym minimalnym przykładzie Card zawiera wywołanie Text:

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

Implementacje zaawansowane

Definicję interfejsu API znajdziesz w dokumentacji.Card 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 podniesiony nad tło.
• colors: używa typu CardColors do ustawienia domyślnego koloru zarówno kontenera, jak i jego elementów podrzędnych.
• enabled: jeśli przekażesz wartość false dla tego parametru, karta będzie wyglądać jak wyłączona i nie będzie reagować na dane wejściowe 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.

Ten 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

Oto przykład implementacji wypełnionej karty.

Kluczem 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 z efektem podniesienia

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 wynikający z niego cień.

@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 obrysem

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 interfejsu użytkownika Material Design