Jetpack Compose Glimmer'daki kartlar

Geçerli 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 →

XR cihaz türleri hakkında bilgi edinin →

Jetpack Compose Glimmer'da Card bileşeni, ilgili bilgileri tek bir birimde gruplandırmak ve görüntülemek için tasarlanmıştır. Kartlar son derece uyarlanabilir olup ana içerik, isteğe bağlı başlıklar ve altyazılar ile önde veya arkada yer alan simgelerin kombinasyonlarını destekler. Kartlar, varsayılan olarak yapay zeka gözlüğünün ekranının maksimum genişliğini kaplar, odaklanılabilir ve tıklanabilir hale getirilebilir.

Kartın Anatomisi ve Yuvaları

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

• Başlık: Kartın üst kısmı. Resim içerecek şekilde tasarlanmıştır.

• Başlık ve Alt Başlık: Bu metin alanları, kartın ana ve ikincil etiketlerini sağlar.

• Ön Simge: Kartın içerik alanının başında görünen isteğe bağlı bir simge.

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

• İşlem: Düğme gibi birincil etkileşimli öğe için ayrılan alan. Bu sayede kullanıcılar doğrudan karttan işlem yapabilir. Yuva, Card composable'ın ayrı bir aşırı yüklemesinde kullanılabilir.

• Ana İçerik: Kartın ana gövdesi. Birincil metni veya diğer içerikleri buraya yerleştirirsiniz.

Temel örnek: Temel kart oluşturma

Çok az kodla çok basit bir kart oluşturabilirsiniz:

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

Ayrıntılı örnek: Karmaşık bir kart görüntüleme

Aşağıdaki kodda, kart oluşturmak için birden fazla yuvanın birlikte nasıl kullanılacağı gösterilmektedir. Ayrıca Card ile TitleChip'ın nasıl eşleneceği de gösterilir.

@Composable
fun SampleGlimmerCard() {
    val myHeaderImage = painterResource(id = R.drawable.header_image)
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }
        Spacer(Modifier.height(TitleChipDefaults.AssociatedContentSpacing))
        Card(
            action = {
                Button(onClick = {}) {
                    Text("Action Button")
                }
            },
            header = {
                Image(
                    painter = myHeaderImage,
                    contentDescription = "Header image for the card",
                    contentScale = ContentScale.FillWidth
                )
            },
            title = { Text("Card Title") },
            subtitle = { Text("Card Subtitle") },
            leadingIcon = { FavoriteIcon, "Localized description" },
            trailingIcon = { FavoriteIcon, "Localized description" }
        ) {
            Text("A Jetpack Compose Glimmer Card using all available slots")
        }
    }
}

Kodla ilgili önemli noktalar

• Kartın içeriğini ve yapısını özelleştirmek için header, title, subtitle, leadingIcon ve action gibi çeşitli kart öğelerinin nasıl kullanılacağını gösterir.
• TitleChip yerleştirme ve Spacer kullanma örneğini gösterir.