Jetpack Compose Glimmer 中的标题 chip

适用的 XR 设备

本指南可帮助您为以下类型的 XR 设备打造优质体验。

了解 XR 设备类型 →

显示眼镜

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，TitleChip 组件是一个非交互式组件，可为相关内容（例如 Card 或 GlimmerLazyColumn）提供简短的上下文或标签。

使用标题条状标签来显示简明信息，例如短商品名、类别名称或状态指示器。通常，您应将标题条状标签放置在所描述内容的上方，以建立清晰的结构关系。

图 1. Jetpack Compose Glimmer 中的默认样式标题条状标签和粘性标题条状标签示例。每个标题条状标签都有一个标签 (1) 和一个可选的前导图标或实体 (2)。

基本示例：创建短标题条状标签

以下代码会创建一个基本标题条状标签：

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

基本示例：创建带有图标的标题条状标签

以下代码会创建一个带有图标的标题条状标签：

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

示例：创建带有卡片的标题条状标签

如需将标题条状标签与其他组件搭配使用，请在可组合项中将标题条状标签 TitleChipDefaults.associatedContentSpacing 放置在其他组件上方。以下代码会创建一个带有卡片的标题条状标签：

@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")
        }
    }
}
TitleChipSample.kt

代码要点

• 标题条状标签水平居中，这是放置在卡片上方的标题条状标签的常用对齐方式。
• Spacer 具有固定高度，可在两个组件之间提供适当的垂直间距。此属性使用 TitleChipDefaults.associatedContentSpacing 进行定义。
• 使用可选的 leadingIcon 在文本内容之前添加额外的视觉上下文。
• 标题条状标签会自动为其文本使用 caption 样式。
• 标题条状标签不具有互动性。如果您需要可点击的标签，请使用 Button 或其他互动式组件。