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 bazı örnekler verilmiştir:

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

Card'yi 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, Oluştur'daki diğer kapsayıcılara benzer şekilde çalışır. İç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ükselmiş 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 gönderirseniz kart devre dışı olarak görünür ve kullanıcı girişlerine yanıt vermez.
  • onClick: Normalde Card, 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'te, yükseltilmiş kartın nasıl uygulanacağı gösterilmektedir. Özel ElevatedCard bileşenini kullanın.

Yüksekliğin görünümünü ve bunun sonucunda oluşan 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, kenarları sivriltilmiş 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. Kenarları kalınlaştırılmış kart örneği.

Sınırlamalar

Kartlar, kaydırma veya kapatma işlemleriyle birlikte gelmez ancak bu özellikleri sunan bileşenlere entegre edilebilir. Örneğin, bir kartta kaydırarak kapatma özelliğini uygulamak için bu özelliği SwipeToDismiss bileşeniyle 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