Jetpack Compose Glimmer 中的标题 chip

适用的 XR 设备

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

了解 XR 设备类型 →

AI 眼镜

了解 XR 设备类型 →

在 Jetpack Compose Glimmer 中，TitleChip 组件旨在 为关联内容（例如卡片）提供简短的非互动式标签。使用标题小卡片显示简洁的信息，例如简短的标题、名称或状态。由于标题小卡片不可聚焦或互动，因此它们在 Jetpack Compose Glimmer 界面中仅发挥信息传递作用。例如，您可以在可滚动的配料列表旁边提供一个标题为“配料”的标题小卡片。

图 1.Jetpack Compose Glimmer 中一些不同样式的标题小卡片的示例。

显示了默认标题小卡片和固定标题小卡片。固定标题小卡片会显示轮廓。

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 具有固定高度，用于在两个组件之间提供正确的垂直间距，该间距由 TitleChipDefaults.AssociatedContentSpacing 定义。