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.
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 typuCardColors
do ustawienia koloru domyślnego w obu usługach. kontenera i elementów podrzędnych.enabled
: jeśli przekażeszfalse
dla tego parametru, karta będzie wyglądać tak jest wyłączony i nie reaguje na dane wejściowe użytkownika.onClick
: zwykleCard
nie akceptuje zdarzeń kliknięcia. W związku z tym: zasadnicze przeciążenie jest tym, że określa onoonClick
. Użyj tego przeciążenia, jeśli chcesz, implementacjiCard
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, ) } }
Implementacja wygląda tak:
![Karta jest wypełniona kolorem powierzchni z motywu materiałowego.](https://developer.android.com/static/develop/ui/compose/images/components/card-filled.png?authuser=0000&hl=pl)
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, ) } }
Implementacja wygląda tak:
![Karta znajduje się nad tłem aplikacji, w cieniu.](https://developer.android.com/static/develop/ui/compose/images/components/card-elevated.png?authuser=0000&hl=pl)
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, ) } }
Implementacja wygląda tak:
![Karta jest otoczona cienkim czarnym obramowaniem.](https://developer.android.com/static/develop/ui/compose/images/components/card-outlined.png?authuser=0000&hl=pl)
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.