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

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 w tym minimalnym przykładzie funkcja 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 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 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 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

Implementacja wygląda tak:

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:

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

• Dokumentacja interfejsu Material Design