Karta

Element kompozycyjny Card działa jako kontener stylu Material Design dla Twojego interfejsu użytkownika. Zazwyczaj karty wyświetlają jeden spójny fragment treści. Oto kilka przykładów miejsc, w których można użyć karty:

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

Skupia się na przedstawieniu jednego elementu treści, który odróżnia Card od innych kontenerów. Na przykład Scaffold określa ogólną strukturę całego ekranu. Karta jest zwykle mniejszym elementem interfejsu w większym układzie, natomiast komponent układu, taki jak Column czy Row, to prostszy i bardziej ogólny interfejs API.

Uniesiona karta z tekstem i ikonami.
Rysunek 1. Przykład karty zawierającej tekst i ikony.

Implementacja podstawowa

Pole Card działa tak samo jak inne kontenery w funkcji Compose. Deklarujesz treść, wywołując w niej inne elementy kompozycyjne. Na przykład w tym minimalnym przykładzie Card zawiera wywołanie funkcji Text:

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

Implementacje zaawansowane

Zapoznaj się z dokumentacją zawierającą definicję interfejsu API Card. Definiuje kilka parametrów, które umożliwiają dostosowanie wyglądu i działania komponentu.

Najważniejsze parametry:

  • elevation: dodaje do komponentu cień, dzięki czemu jego element jest wyniesiony nad tłem.
  • colors: używa typu CardColors do ustawienia domyślnego koloru zarówno kontenera, jak i wszystkich elementów podrzędnych.
  • enabled: jeśli podasz 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 Card nie akceptuje zdarzeń kliknięcia. W związku z tym głównym przeciążeniem jest to, że definiuje on parametr onClick. Użyj tego przeciążenia, jeśli chcesz, aby implementacja Card odpowiadała na kliknięcia użytkownika.

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

Wypełniona karta

Poniżej pokazujemy, jak możesz wdrożyć wypełnioną kartę.

Kluczowe jest tutaj wykorzystanie właściwości colors do zmiany wypełnionego koloru.

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

Karta z podwyższonym poziomem

Ten fragment kodu pokazuje, jak wdrożyć kartę z podwyższonym poziomem uprawnień. Użyj przeznaczonej funkcji kompozycyjnej ElevatedCard.

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

Implementacja wygląda tak:

Karta znajduje się nad tłem aplikacji, w cieniu.
Rysunek 3. Przykład karty z podwyższonym standardzie.

Karta z konturem

Poniżej znajdziesz przykład z konturem karty. Użyj dedykowanej funkcji kompozycyjnej 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 otoczona cienkim czarnym obramowaniem.
Rysunek 4. Przykład oznaczonej karty.

Ograniczenia

Karty nie wymagają przewijania ani zamykania, ale można integrować się z elementami kompozycyjnymi oferującymi te funkcje. Aby na przykład wdrożyć funkcję przesuwania w celu zamknięcia karty, zintegruj ją z funkcją kompozycyjną SwipeToDismiss. Aby przeprowadzić integrację z przewijaniem, używaj modyfikatorów przewijania, takich jak verticalScroll. Więcej informacji znajdziesz w dokumentacji przewijania.

Dodatkowe materiały