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 przykładowe zastosowania kart:

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

Polega on na przedstawieniu jednego elementu treści, który wyróżnia Card z innych kontenerów. Na przykład Scaffold zapewnia ogólną strukturę na cały ekran. Karta jest zwykle mniejszym elementem interfejsu w większym układ, natomiast komponent układu, taki jak Column czy Row, jest 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ść strony przez innych elementów kompozycyjnych, które się w nim znajdują. Na przykład sprawdź, jak Card zawiera element wywołanie Text w tym minimalnym przykładzie:

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

Implementacje zaawansowane

Zapoznaj się z dokumentacją zawierającą definicję interfejsu API Card. Definiuje ona kilka które pozwalają dostosować wygląd i działanie .

Najważniejsze parametry:

  • elevation: dodaje cień do komponentu, dzięki któremu się on pojawia. nad tłem.
  • colors: używa typu CardColors do ustawienia koloru domyślnego w obu usługach. kontenera i elementów podrzędnych.
  • enabled: jeśli przekażesz false dla tego parametru, karta będzie wyglądać tak jest wyłączony i nie reaguje na dane wejściowe użytkownika.
  • onClick: zwykle Card nie akceptuje zdarzeń kliknięcia. W związku z tym: zasadnicze przeciążenie jest tym, że określa ono onClick. Użyj tego przeciążenia, jeśli chcesz, implementacji Card w celu reagowania na wiadomości od użytkownika.

Poniższy przykład pokazuje, w jaki sposób można używać tych parametrów jako inne wspólne parametry, takie jak shape i modifier.

Wypełniona karta

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

Kluczowe jest tutaj użycie właściwości colors do zmiany wypełnionych 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 podwyższona

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

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

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 dedykowanego OutlinedCard kompozycyjne.

@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ę elementów kompozycyjnych oferujących te funkcje. Aby na przykład wdrożyć przesuwanie w celu zamknięcia, na karcie, zintegruj ją z kompozycją SwipeToDismiss. Integracja przy przewijaniu, użyj modyfikatorów przewijania, takich jak verticalScroll. Zobacz Przewiń dokumentacji.

Dodatkowe materiały