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 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'ü 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 parametreleri 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 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 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:

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, 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 kapatmak için kaydırmayı uygulamak istiyorsanız 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