Jetpack Compose Glimmer のタイトルチップ

対象の XR デバイス

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

XR デバイスの種類について →

XR デバイスの種類について →

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

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

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

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 の高さは固定されており、TitleChipDefaults.AssociatedContentSpacing で定義された 2 つのコンポーネント間の垂直方向のスペースを正しく確保します。