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.
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 typuCardColors
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
: zwykleCard
nie akceptuje zdarzeń kliknięcia. W związku z tym głównym przeciążeniem jest to, że definiuje on parametronClick
. Użyj tego przeciążenia, jeśli chcesz, aby implementacjaCard
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, ) } }
Implementacja wygląda tak:
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, ) } }
Implementacja wygląda tak:
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, ) } }
Implementacja wygląda tak:
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.