Jetpack Compose Glimmer'daki kartlar

Uygun XR cihazlar
Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.
XR cihaz türleri hakkında bilgi edinin →
Görüntüleme Gözlüğü
XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da Card bileşeni, ilgili içeriklerin birincil kapsayıcısı olarak işlev görür ve anlaşılır bilgi birimleri için net bir görsel sınır oluşturur. Kartlar son derece uyarlanabilir olup ana içerik, isteğe bağlı başlıklar, altyazılar ve öndeki veya arkadaki simgelerin kombinasyonlarını destekler. Kartlar varsayılan olarak mevcut maksimum genişliği doldurur, odaklanılabilir ve tıklanabilir hale getirilebilir. Kartlar, başlık resminin en üstte, ardından başlık, alt başlık ve gövde içeriğinin yer aldığı dikey düzeni destekler.

Kartlar, Jetpack Compose Glimmer yüzey sistemi üzerine kurulduğundan derinlik efektleri, kırpma ve tutarlı kenarlık vurguları gibi fiziksel özellikleri devralır.

Şekil 1. Jetpack Compose Glimmer'daki bazı farklı kart stillerinin örneği.

Anatomi ve alanlar

Jetpack Compose Glimmer kartı, içeriğini ve düzenini özelleştirmenize olanak tanıyan çeşitli özel öğelerden oluşur.

Alan Açıklama

Başlık

Kartın üst kısmı, resim eklemek için tasarlanmıştır.

Başlık ve alt başlık

Bu metin alanları, kartın ana ve ikincil etiketlerini sağlar. Başlık, alt başlığın üstüne yerleştirilir.

Ön simge

Kartın içerik alanının başında görünen isteğe bağlı bir simge (genellikle Icon).

Sondaki simge

Kartın içerik alanının sonunda görünen isteğe bağlı simge.

Ana içerik

Birincil Text veya içerik için kartın ana gövdesi.

Kart varsayılanları

Kartlar için aşağıdaki varsayılanlar geçerlidir:

  • Genişlik: Kartlar, ekran gözlüklerinde okunabilirliği optimize etmek için ekranın kullanılabilir maksimum genişliğini doldurur.
  • Minimum yükseklik: 80.dp
  • Metin dikey aralığı: 3.dp
  • Başlık şekli: 24.dp köşeli RoundedCornerShape kullanır.
  • İçerik dolgusu: Varsayılan olarak GlimmerTheme.componentSpacingValues.medium değerine ayarlanır. Bu, başlık resimlerinin ve içerik kapsayıcısının etrafındaki en dıştaki dolguyu etkiler.
  • Şekil: Varsayılan olarak GlimmerTheme.shapes.medium değerine ayarlanır.

  • Metin oluşturma: Aşağıdaki yuvalar için GlimmerTheme.typography öğesindeki varsayılan değerleri kullanır:

Örnek: Temel kart

Aşağıdaki kodda kart oluşturmak için gereken minimum kod gösterilmektedir:

Card { Text("This is a card") }

Örnek: Birden fazla slota sahip kart

Aşağıdaki kodda, kart oluşturmak için birden fazla yuvanın birlikte nasıl kullanılacağı gösterilmektedir:

Card(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    trailingIcon = { Icon(BookmarkIcon, contentDescription = "Bookmark") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
) {
    Text("This is a complete card")
}

Kodla ilgili önemli noktalar

  • Kartın içeriğini ve yapısını özelleştirmek için title, subtitle ve leadingIcon gibi çeşitli kart öğelerinin nasıl kullanılacağını gösterir.
  • Tüm kart yüzeyini etkileşimli hale getirmek için onClick ile Card aşırı yüklemesini kullanır.

İşlem kartları

Karta işlem düğmesi eklemek istiyorsanız ActionCard kullanın. İşlem kartları, standart kartlarla aynı öğeleri içerir ve alt kısımdaki düğmeyi tanımlayan ek bir action parametresi de içerir.

Şekil 2. Jetpack Compose Glimmer'da ActionCard örneği.

Örnek: Temel işlem kartı

Bu kodda ActionCard nasıl oluşturulacağı gösterilmektedir:

ActionCard(
    action = {
        Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
            Text("Send")
        }
    }
) {
    Text("This is a card with a title, leading icon, header image, and action")
}

Örnek: Simge içeren işlem kartı

Bu kodda, simgelerle daha karmaşık bir ActionCard oluşturma işlemi gösterilmektedir:

ActionCard(
    title = { Text("Card Title", style = GlimmerTheme.typography.titleMedium) },
    subtitle = { Text("Sub-heading text", style = GlimmerTheme.typography.titleSmall) },
    leadingIcon = { Icon(FavoriteIcon, contentDescription = "Favorite") },
    header = {
        Image(
            painter = myHeaderImage,
            contentDescription = "Header image",
            contentScale = ContentScale.FillWidth
        )
    },
    action = {
        Button(onClick = { /* Handle action */ }) {
            Text("Action")
        }
    }
) {
    Text(
        "This is the main body content of the card, utilizing theme-tokens for consistent styling.",
        style = GlimmerTheme.typography.bodyMedium
    )
}