Card
composable, kullanıcı arayüzünüz için bir Materyal Tasarım kapsayıcısı işlevi görür.
Kartlar genellikle tek bir tutarlı içerik sunar. Aşağıda, kartları kullanabileceğiniz yerlere bazı örnekler verilmiştir:
- Alışveriş uygulamasındaki bir ürün.
- Bir haber uygulamasında haber.
- İletişim uygulamasında bir mesaj.
Card
özelliğini diğer kapsayıcılardan ayıran tek bir içerik parçasına yer vermeye odaklanılır. Örneğin, Scaffold
tüm ekran için genel bir yapı sağlar. Kart, genellikle daha büyük bir düzen içinde yer alan daha küçük bir kullanıcı arayüzü öğesidir. Column
veya Row
gibi düzen bileşenleri ise daha basit ve genel bir API sunar.
Temel uygulama
Card
, Compose'daki diğer kapsayıcılar gibi davranır. İçeriğini, içindeki diğer composable'ları
çağırarak tanımlarsınız. Örneğin, aşağıdaki en küçük örnekte Card
öğesinin nasıl Text
çağrısı içerdiğini düşünelim:
@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 parametreler tanımlar.
Dikkat edilmesi gereken bazı önemli parametreler aşağıda belirtilmiştir:
elevation
: Bileşene, arka planın üzerinde görünmesini sağlayan bir gölge ekler.colors
: Hem container'ı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
: Normalde,Card
tıklama etkinliklerini kabul etmez. Dikkat edilmesi gereken birincil aşırı yük, bironClick
parametresini tanımlayan şeydir.Card
uygulamanızın kullanıcının basmalarına yanıt vermesini istiyorsanız bu aşırı yüklemeyi kullanmanız gerekir.
Aşağıdaki örnekte, bu parametrelerin yanı sıra shape
ve modifier
gibi diğer yaygın parametreleri nasıl kullanabileceğiniz de gösterilmektedir.
Doldurulmuş kart
Aşağıda, doldurulmuş bir kartı nasıl uygulayabileceğinize ilişkin bir örnek verilmiştir.
Burada önemli olan, doldurulan rengi değiştirmek 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'te yükseltilmiş bir kartın nasıl uygulanacağı gösterilmektedir. Özel ElevatedCard
composable'ı kullanın.
Yüksekliğin görünümünü ve sonuçta ortaya çıkan 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 bir 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, yapısı gereği kaydırma veya kapatma işlemleriyle birlikte gelmez ancak bu özellikleri sunan composable'lara entegre edilebilir. Örneğin, bir kartta kaydırarak kapatma özelliğini uygulamak için kartı SwipeToDismiss
composable ile entegre edin. Kaydırma ile entegrasyon için verticalScroll
gibi kaydırma değiştiricileri kullanın. Daha fazla bilgi için Kaydırma belgelerine göz atın.