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

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 TitleChip bileşeni, ilişkili içerik için kısa bağlam veya etiketleme sağlayan etkileşimli olmayan bir bileşendir. Örneğin, Card veya VerticalList.

Kısa başlık, kategori adı veya durum göstergesi gibi kısa bilgiler için başlık çipleri kullanın. Normalde, net bir yapısal ilişki oluşturmak için başlık çipleri, tanımladıkları içeriğin üzerine yerleştirilmelidir.

Şekil 1. Jetpack Compose Glimmer'da varsayılan stil başlık çipi ve sabit başlık çipi örneği. Her başlık çipinde bir etiket (1) ve isteğe bağlı olarak bir ön 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 TitleChipSample() {
    TitleChip { Text("Messages") }
}

Example: Create a title chip with a card

To use a title chip with another component, place the title chip TitleChipDefaults.associatedContentSpacing above the other component in the composable. The following code creates a title chip with a card:

@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 çipleri 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.