Kart

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.

Metin ve simgelerle dolu yüksek kart.
Şekil 1. Metin ve simgelerle doldurulmuş bir kart örneği.

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çin CardColors türünü kullanır.
  • enabled: Bu parametre için false 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, bir onClick 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,
        )
    }
}
Card.kt

Bu uygulama aşağıdaki gibi görünür:

Bir kart, malzeme temasındaki yüzey varyantı rengiyle doldurulmuş.
Şekil 2. Doldurulmuş kart örneği.

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,
        )
    }
}
Card.kt

Bu uygulama aşağıdaki gibi görünür:

Kart, uygulamanın arka planının üzerinde gölgeyle gösteriliyor.
Şekil 3. Yükseltilmiş kart örneği.

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,
        )
    }
}
Card.kt

Bu uygulama aşağıdaki gibi görünür:

İnce siyah bir kenarlıkla bir kart gösteriliyor.
Şekil 4. Dış çizgili kart örneği.

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.

Ek kaynaklar