条状标签

Chip 组件是表示输入、属性或操作的互动性紧凑元素。

剖析

条状标签最多可包含两个文本标签和一个可选图标。必须提供至少一个文本标签或图标。如果文本标签过长，条状标签可能会截断文本。如果存在次级标签，则主标签为一行文本；如果没有次级标签，则主标签为最多两行文本。

A. 主标签
B. 次级标签（可选）
C. 图标（可选）
D. 容器

设计建议

图片条状标签

图片条状标签包含与所选图片相关的操作。图片条状标签非常适合传达更具体的外观和风格。

Chip(
    ...
    label = {
        Text(
            text = “Summer Mix”,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)

头像条状标签

使用头像条状标签执行与所选头像相关的操作。头像卡片还可以包含一些图标，例如联系人身份照片，以便用户更轻松地辨识头像。头像图标的大小为 32x32dp。

Chip(
    ...
    label = {
        Text(text = “Mark Castle”)
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Mark Castle",
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)