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.

Metin ve simgelerle dolu yüksek 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 ç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: Her iki öğenin varsayılan rengini ayarlamak için CardColors türünü kullanır alt öğeleri içerir.
  • enabled: Bu parametre için false değerini iletirseniz kart şu şekilde görünür: devre dışıdır ve kullanıcı girişine yanıt vermiyor.
  • 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:

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

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ükseltinin görünümünü ve yüksekliği kontrol etmek için elevation özelliğini kullanabilirsiniz. ortaya çıkan gölge.

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

İnce siyah bir kenarlıkla bir kart gösteriliyor.
Şekil 4. Dış çizgili kart örneği.

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