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. Bu alanlar: Aşağıdaki örneklerde kartı kullanabilirsiniz:

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

Farklı içerik türlerini öne çıkaran tek bir içeriği göstermeye odaklanır. Diğer kapsayıcılardaki Card. Örneğin, Scaffold, genel bir yapı sağlar tüm ekrana sığdırır. Kart, genellikle daha büyük bir düzen ise Column veya Row gibi bir düzen bileşeni daha basit ve daha genel bir API kullanın.

Temel uygulama

Card, Compose'daki diğer kapsayıcılara çok benzer. İçeriğini çağrıda bulunur. Örneğin, Card öğesinin nasıl bir aşağıdaki asgari örnekte Text çağrısı:

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

Gelişmiş uygulamalar

Card API tanımı için referansa bakın. Tanımladığı birçok görünümünü ve davranışını özelleştirmenize olanak tanıyan parametreleri bir bileşenidir.

Dikkat edilmesi gereken bazı önemli parametreler şunlardır:

• elevation: Bileşenin görünmesini sağlayan bir gölge ekler yükseltilebilir.
• 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: Card, genellikle tıklama etkinliklerini kabul etmez. Dolayısıyla, dikkate almak istediğiniz temel aşırı yük, onClick parametresinden yararlanın. Bu aşırı yüklemeyi kullanıcının basmalarına yanıt vermek için Card uygulanması.

Aşağıdaki örnekte, bu parametrelerin yanı sıra, reklam grubu genelinde diğer yaygın parametreler (ör. shape ve modifier) ile aynı olacaktır.

Doldurulmuş kart

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

Buradaki anahtar, doldurulmuş değeri değiştirmek için colors özelliğinin kullanılmasıdır. rengi.

@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:

Yükseltilmiş Kart

Aşağıdaki snippet, üst seviye bir kartın nasıl uygulanacağını gösterir. Şunu kullanın: özel ElevatedCard composable.

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:

Dış Çizgili Kart

Aşağıda, dış çizgili kart örneği verilmiştir. Özel OutlinedCard composable.

@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:

Sınırlamalar

Kartlar kendi içinde kaydırma veya kapatma işlemleriyle birlikte gelir ancak aşağıdakilere entegre edilebilir composable'dan bahsetmek istiyorum. Örneğin, kapatmak için kaydırma uygulamak için SwipeToDismiss composable ile entegre edin. Entegrasyon için kaydırmak için verticalScroll gibi kaydırma değiştiricileri kullanın. Bkz. Kaydırma dokümanlarına bakın.

Ek kaynaklar

• Materyal kullanıcı arayüzü belgeleri