Karta

Funkcja kompozycyjna Card działa jako kontener Material Design interfejsu. Karty zazwyczaj prezentują 1 spójny fragment treści. Oto kilka przykładów wykorzystania kart:

  • Produkt w aplikacji zakupowej.
  • Informacja w aplikacji z wiadomościami.
  • Wiadomość w aplikacji do komunikacji.

Skupia się na reprezentowaniu 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 to zazwyczaj mniejszy element interfejsu w większym układzie, natomiast komponent układu, taki jak Column czy Row, zapewnia prostszy i bardziej ogólny interfejs API.

Karta podwyższona z tekstem i ikonami.
Rysunek 1. Przykład karty wypełnionej tekstem i ikonami.

Implementacja podstawowa

Card działa prawie tak samo jak inne kontenery w komponencie. Deklarujesz jej treść, wywołyjąc w nim inne elementy kompozycyjne. W tym minimalnym przykładzie sprawdź, jak Card zawiera wywołanie Text:

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

Implementacje zaawansowane

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

Kilka ważnych parametrów:

  • elevation: dodaje do komponentu cień, dzięki któremu wydaje się, że jest on powyżej tła.
  • colors: używa typu CardColors do ustawiania domyślnego koloru zarówno kontenera, jak i jego elementów podrzędnych.
  • enabled: jeśli przekażesz wartość false w przypadku tego parametru, karta będzie widoczna jako wyłączona i nie będzie reagować na dane wejściowe użytkownika.
  • onClick: zazwyczaj element Card nie akceptuje zdarzeń kliknięcia. Warto więc zauważyć, że główne przeciążenie polega na definiowaniu parametru onClick. Skorzystaj z tego przeciążenia, jeśli chcesz, aby Twoje wdrożenie Card odpowiadało na naciśnięcia użytkowników.

Poniższy przykład pokazuje, jak można korzystać z tych parametrów i innych popularnych parametrów, takich jak shape i modifier.

Wypełniona karta

Poniżej znajduje się przykład wykorzystania wypełnionej karty.

Kluczem do zmiany koloru wypełnienia jest użycie właściwości colors.

@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łniana kolorem powierzchni z motywu materiału.
Rysunek 2. Przykład wypełnionej karty.

Karta podwyższona

Ten fragment kodu pokazuje, jak wdrożyć kartę z podwyższonym poziomem uprawnień. Użyj dedykowanego elementu kompozycyjnego ElevatedCard.

Za pomocą właściwości elevation możesz kontrolować wygląd wysokości i wynikowy 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

Implementacja wygląda tak:

Karta jest umieszczona nad tłem aplikacji, w cieniu.
Rysunek 3. Przykład karty z podwyższonym poziomem dostępu.

Karta z konturem

Poniżej znajduje się przykład karty z zarysem. Użyj dedykowanego elementu kompozycyjnego 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

Implementacja wygląda tak:

Karta jest oznaczona cienkim czarnym obramowaniem.
Rysunek 4. Przykład zaznaczonej karty.

Ograniczenia

Karty nie mają naturalnych działań związanych z przewijaniem ani zamykaniem, ale można je zintegrować z elementami kompozycyjnymi oferującymi te funkcje. Aby na przykład zastosować funkcję zamykania karty przez przesunięcie palcem, zintegruj ją z funkcją kompozycyjną SwipeToDismiss. Aby zintegrować ją z przewijaniem, użyj modyfikatorów przewijania, np. verticalScroll. Więcej informacji znajdziesz w dokumentacji przewijania.

Dodatkowe materiały