Card
composable, kullanıcı arayüzünüz için Materyal Tasarım kapsayıcısı görevi görür.
Kartlar genellikle tek bir tutarlı içerik sunar. Aşağıda, kartları kullanabileceğiniz yerlere ilişkin bazı örnekler verilmiştir:
- Alışveriş uygulamasındaki bir ürün.
- Bir haber uygulamasındaki haber.
- İletişim uygulamasında bir mesaj.
Card
, diğer kapsayıcılardan ayıran tek bir içerik parçasını göstermeye odaklanır. Örneğin, Scaffold
tüm ekranın genel
yapısını sağlar. Kart, genellikle daha büyük bir düzen içindeki daha küçük bir kullanıcı arayüzü öğesidir. Column
veya Row
gibi bir düzen bileşeni ise daha basit ve daha genel bir API sağlar.
Temel uygulama
Card
, Compose'daki diğer kapsayıcılara çok benzer. İçeriğini, içindeki diğer composable’ları
çağırarak açıklarsınız. Örneğin, aşağıdaki minimum örnekte Card
öğesinin nasıl Text
çağrısı içerdiğini düşünün:
@Composable
fun CardMinimalExample() {
Card() {
Text(text = "Hello, world!")
}
}
Gelişmiş uygulamalar
Card
API tanımı için referansa bakın. Bileşenin görünümünü ve davranışını özelleştirmenize olanak tanıyan çeşitli parametreleri tanımlar.
Dikkat edilmesi gereken bazı önemli parametreler şunlardır:
elevation
: Bileşene, arka planın üzerinde yükseltilmiş gibi görünmesini sağlayan bir gölge ekler.colors
: Hem kapsayıcının hem de alt öğelerin varsayılan rengini ayarlamak içinCardColors
türünü kullanır.enabled
: Bu parametre içinfalse
değerini iletirseniz kart devre dışı olarak görünür ve kullanıcı girişine yanıt vermez.onClick
:Card
, genellikle tıklama etkinliklerini kabul etmez. Bu nedenle, dikkat etmek istediğiniz birincil aşırı yükleme, bironClick
parametresinin tanımlandığını ifade eder.Card
uygulamanızın, kullanıcıdan gelen basma işlemlerine yanıt vermesini istiyorsanız bu aşırı yüklemeyi kullanmalısınız.
Aşağıdaki örnek, bu parametrelerin yanı sıra shape
ve modifier
gibi diğer yaygın parametreleri nasıl kullanabileceğinizi göstermektedir.
Doldurulmuş kart
Aşağıda, doldurulmuş bir kartı nasıl uygulayabileceğinize dair bir örnek verilmiştir.
Buradaki anahtar, doldurulmuş rengin değiştirilmesi için colors
özelliğinin kullanılmasıdır.
@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, ) } }
Bu uygulama aşağıdaki gibi görünür:
Yükseltilmiş Kart
Aşağıdaki snippet, üst seviye bir kartın nasıl uygulanacağını gösterir. Özel ElevatedCard
composable'ı kullanın.
Yüksekliğin görünümünü ve elde edilen gölgeyi kontrol etmek için elevation
özelliğini kullanabilirsiniz.
@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, ) } }
Bu uygulama aşağıdaki gibi görünür:
Dış çizgili kart
Aşağıda, dış çizgili kart örneği verilmiştir. Özel OutlinedCard
composable'ı kullanın.
@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, ) } }
Bu uygulama aşağıdaki gibi görünür:
Sınırlamalar
Kartlar kendi içinde kaydırma veya kapatma işlemleriyle birlikte gelmez, ancak bu özellikleri sunan composable'lara entegre edilebilir. Örneğin, bir kartta kapatmak için kaydırma özelliğini uygulamak
için bunu SwipeToDismiss
composable ile entegre edin. Kaydırma ile entegre etmek için verticalScroll
gibi kaydırma değiştiricileri kullanın. Daha fazla bilgi için Kaydırma belgelerini inceleyin.