Kart

Card bileşeni, kullanıcı arayüzünüz için bir Material Design kapsayıcısı görevi görür. Kartlar genellikle tek bir tutarlı içerik parçası sunar. Aşağıda, kartları kullanabileceğiniz yerlere dair bazı örnekler verilmiştir:

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

Card'ü diğer kapsayıcılardan ayıran, tek bir içerik parçasına odaklanmaktır. Örneğin, Scaffold tüm ekran için genel yapı sağlar. Kart genellikle daha büyük bir düzenin 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 doldurulmuş yükseltilmiş bir 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 birleştirilebilir öğeleri çağırarak belirtirsiniz. Örneğin, aşağıdaki minimal örnekte Card'in Text çağrısını nasıl içerdiğini düşünün:

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

Gelişmiş uygulamalar

Card API tanımı için referans bölümüne 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 ş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 öğelerinin 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, dikkate almak istediğiniz birincil aşırı yükleme, onClick parametresini tanımlayan aşırı yüklemedir. 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 parametrelerin nasıl kullanılabileceği gösterilmektedir.

Doldurulmuş kart

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

Buradaki anahtar, doldurulmuş rengi değiştirmek için colors mülkünün 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ından alınan yüzey varyantı rengiyle doldurulur.
Şekil 2. Doldurulmuş bir kart örneği.

Yükseltilmiş Kart

Aşağıdaki snippet, üst seviye bir kartın nasıl uygulanacağını gösterir. Özel ElevatedCard bileşenini kullanın.

Yüksekliğin görünümünü ve ortaya çıkan gölgeyi kontrol etmek için elevation mülkünü 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, gölgeli olarak uygulamanın arka planının üzerinde yükseltilir.
Şekil 3. Yükseltilmiş kart örneği.

Dış Çizgili Kart

Aşağıda, dış çizgili bir kart örneği verilmiştir. Özel OutlinedCard bileşenini 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:

Kartın etrafına ince siyah bir kenarlık çizilir.
Ş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 dokümantasyonunu inceleyin.

Ek kaynaklar