Jetpack Compose Glimmer のタイトルチップ

対象の XR デバイス

このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。

XR デバイスのタイプについて →

XR デバイスのタイプについて →

Jetpack Compose Glimmer の TitleChip コンポーネントは、カードなどの関連コンテンツの簡潔な非インタラクティブ ラベルを提供するように設計されています。タイトルチップを使用して、短いタイトル、名前、ステータスなどの簡潔な情報を表示します。タイトルチップはフォーカス可能でもインタラクティブでもないため、Jetpack Compose Glimmer UI 内で純粋に情報提供の役割を果たします。たとえば、スクロール可能な材料リストの横に「材料」というラベルの付いたタイトルチップを表示できます。

デフォルトのタイトルチップと固定タイトルのチップが表示されている。固定タイトルのチップはアウトライン付きで表示されます。

1. タイトルチップのラベル
2. 先頭のアイコンまたはエンティティ（省略可）

基本的な例: 短いタイトルのチップを表示する

短いタイトルのチップは、わずかなコードで作成できます。

TitleChip { Text("Messages") }

詳細な例: カードにタイトルチップを表示する

タイトル チップを別のコンポーネントとともに使用するには、コンポーザブルでタイトル チップを別のコンポーネントの TitleChipDefaults.AssociatedContentSpacing の上に配置します。次のコードは、カードでタイトルチップを使用する方法を示しています。

@Composable
fun TitleChipExample() {
    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")
        }
    }
}

コードに関する主なポイント

• Spacer の高さは固定されており、2 つのコンポーネント間の正しい垂直方向の間隔（TitleChipDefaults.AssociatedContentSpacing で定義）が確保されます。