Jetpack Compose Glimmer'daki başlık çipleri

Uygun XR cihazlar
Bu kılavuz, bu tür XR cihazlar için deneyimler geliştirmenize yardımcı olur.
XR cihaz türleri hakkında bilgi →
Görüntülü Gözlük
XR cihaz türleri hakkında bilgi →

Jetpack Compose Glimmer'da TitleChip bileşeni, ilişkili içerik için kısa bağlam veya etiket sağlayan etkileşimli olmayan bir bileşendir (ör. Card veya GlimmerLazyColumn).

Kısa başlık, kategori adı veya durum göstergesi gibi kısa bilgiler için başlık çiplerini kullanın. Normalde, net bir yapısal ilişki kurmak için başlık çiplerini açıkladıkları içeriğin üzerine yerleştirmeniz gerekir.

Şekil 1. Jetpack Compose Glimmer'da varsayılan stil başlık çipi ve yapışkan başlık çipi örneği. Her başlık çipinde bir etiket (1) ve isteğe bağlı bir başta yer alan simge veya öğe (2) bulunur.

Temel örnek: Kısa başlık çipi oluşturma

Aşağıdaki kod, temel bir başlık çipi oluşturur:

@Composable
fun BasicTitleChipSample() {
    TitleChip { Text("Messages") }
}

Temel örnek: Simge içeren bir başlık çipi oluşturma

Aşağıdaki kod, simge içeren bir başlık çipi oluşturur:

@Composable
fun TitleChipWithIconSample() {
    TitleChip {
        Icon(FavoriteIcon, contentDescription = "Favorite")
        Text("Favorites")
    }
}

Örnek: Kart içeren bir başlık çipi oluşturma

Başlık çipini başka bir bileşenle kullanmak için başlık çipini composable'da diğer bileşenin TitleChipDefaults.associatedContentSpacing üzerine yerleştirin. Aşağıdaki kod, kart içeren bir başlık çipi oluşturur:

@Composable
fun TitleChipWithCardSample() {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        TitleChip { Text("Title Chip") }

        Spacer(Modifier.height(TitleChipDefaults.associatedContentSpacing))

        Card(
            title = { Text("Title") },
            subtitle = { Text("Subtitle") },
            leadingIcon = { Icon(FavoriteIcon, "Localized description") },
        ) {
            Text("Card Content")
        }
    }
}

Kodla ilgili önemli noktalar

  • Başlık çipi yatay olarak ortalanır. Bu, kartın üzerine yerleştirilen başlık çipi için normal hizalamadır.
  • Spacer, iki bileşen arasında doğru miktarda dikey boşluk sağlamak için sabit bir yüksekliğe sahiptir. Bu, TitleChipDefaults.associatedContentSpacing kullanılarak tanımlanır.
  • Metin içeriğinden önce ek görsel bağlam eklemek için isteğe bağlı bir leadingIcon kullanır.
  • Başlık çipi, metni için otomatik olarak caption stilini kullanır.
  • Başlık çipi etkileşimli değildir. Tıklanabilir bir etikete ihtiyacınız varsa Button veya başka bir etkileşimli bileşen kullanın.