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çerikler için birincil kapsayıcı görevi görerek kolayca anlaşılabilen 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 önde veya arkada yer alan simgelerin kombinasyonlarını destekler. Kartlar varsayılan olarak mevcut genişliğin tamamını kaplar, odaklanılabilir ve tıklanabilir hale getirilebilir. Kartlar, başlık resminin en üstte, ardından başlığın, alt başlığın 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.

İşlem

Button gibi birincil etkileşimli öğe için bir alan.

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, ekranda 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 kod, temel bir kart oluşturur:

@Composable
fun CardSample() {
    Card { Text("This is a card") }
}

Örnek: Birden fazla yuvalı karmaşık kart

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

@Composable
fun CardWithTitleAndLeadingIconAndHeaderAndAction() {
    Card(
        action = {
            Button(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
                Text("Send")
            }
        },
        title = { Text("Title") },
        leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        header = {
            Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
        },
    ) {
        Text("This is a card with a title, leading icon, header image, and action")
    }
}

Kodla ilgili önemli noktalar

  • Kartın içeriğini ve yapısını özelleştirmek için header, title, leadingIcon ve action gibi çeşitli kart öğelerinin nasıl kullanılacağını gösterir.
  • Yalnızca kart (veya kartın dahili işlemi) odaklanılabilir olması gerektiğinden, işlemle birlikte standart Card aşırı yüklemesini kullanır. Kartın tamamını etkileşimli hale getirmeniz gerekiyorsa bunun yerine onClick ile Card aşırı yüklemesini kullanın.
  • Bu kartta bir işlem yuvası kullanıldığından kart yüzeyine odaklanılamaz ve odak bunun yerine işlem düğmesine yönlendirilir.