Kart

Card composable'ı, kullanıcı arayüzünüz için Material Design kapsayıcısı olarak işlev görür. Kartlar genellikle tek bir tutarlı içerik sunar. Kartı kullanabileceğiniz bazı yerlere ilişkin örnekleri aşağıda bulabilirsiniz:

  • Bir alışveriş uygulamasındaki ürün.
  • Bir haber uygulamasındaki haber.
  • İletişim uygulamasındaki bir mesaj

Card'ı diğer kapsayıcılardan ayıran özellik, tek bir içeriği göstermeye odaklanmasıdır. Örneğin, Scaffold tüm ekranın genel yapısını sağlar. Kart genellikle daha büyük bir düzendeki 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 doldurulmuş, yükseltilmiş bir kart.
1. şekil. Metin ve simgelerle doldurulmuş bir kart örneği.

Temel uygulama

Card, Compose'daki diğer kapsayıcılara benzer şekilde çalışır. İçindeki diğer composable'ları çağırarak içeriğini bildirirsiniz. Örneğin, aşağıdaki en kısa örnekte Card öğesinin Text öğesine nasıl çağrı içerdiğini inceleyin:

@Composable
fun CardMinimalExample() {
    Card() {
        Text(text = "Hello, world!")
    }
}

Gelişmiş uygulamalar

Card API tanımı için referansa bakın. Bu 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 şunlardır:

  • elevation: Bileşene, arka planın üzerinde yükselmiş 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: Normalde bir Card, tıklama etkinliklerini kabul etmez. Bu nedenle, belirtmek istediğiniz birincil aşırı yükleme, onClick parametresini tanımlayan aşırı yüklemedir. Card uygulamanızın kullanıcıdan gelen basma işlemlerine 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 gösterilmektedir.

Doldurulmuş kart

Aşağıda, doldurulmuş bir kartı nasıl uygulayabileceğinize dair bir örnek verilmiştir.

Buradaki anahtar, dolgu rengini 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,
        )
    }
}
Card.kt

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

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

Yükseltilmiş Kart

Aşağıdaki snippet, geliştirilmiş kartın nasıl uygulanacağını gösterir. Özel ElevatedCard composable'ı kullanın.

Yükseklik görünümünü ve 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,
        )
    }
}
Card.kt

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

Bir kart, uygulamanın arka planının üzerinde gölgeyle gösteriliyor.
3.şekil Öne çıkarılmış kart örneği.

Dış Çizgili Kart

Aşağıda, ana hatları belirtilmiş bir 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:

Bir kartın etrafında ince siyah bir kenarlık var.
4.şekil Anahatlı kart örneği.

Sınırlamalar

Kartlarda kaydırma veya kapatma işlemleri yer almaz ancak bu özellikleri sunan composable'lara entegre edilebilirler. Ö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ştiricilerini kullanın. Daha fazla bilgi için Scroll dokümanlarına bakın.

Ek kaynaklar