Karta

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

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

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

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!")
    }
}

Zaawansowane implementacje

Definicję interfejsu API Card znajdziesz w dokumentacji. Określa on kilka parametrów, które umożliwiają dostosowywanie 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. Dlatego należy zwrócić uwagę na główne przeciążenie, które definiuje 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 karty z danymi.

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:

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

Ta implementacja wygląda tak:

Karta z obrysem

Poniżej znajdziesz przykład karty z obrysem. Użyj dedykowanego 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 działań przewijania ani odrzucania, ale można je zintegrować z komponowanymi komponentami, 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 Scroll.

Dodatkowe materiały

• Dokumentacja Material UI