在Android Jetpack Compose中如何为图标添加数字计数（如点赞、评论）

你可以通过Row布局将图标与计数文本横向组合，再配合样式修饰实现类似示例的效果，以下是具体实现方案：

基础实现代码 #

直接使用Row包裹图标和计数文本，快速实现需求：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.spacedBy(4.dp) // 调整图标与计数的间距
) {
    // 替换成你需要的图标
    Icon(
        imageVector = Icons.Filled.Notifications,
        contentDescription = "通知图标",
        tint = Color.Black
    )
    // 计数徽章文本
    Text(
        text = "5",
        style = TextStyle(
            fontSize = 12.sp,
            color = Color.White
        ),
        modifier = Modifier
            .background(Color.Red, shape = RoundedCornerShape(10.dp)) // 圆角背景
            .padding(horizontal = 6.dp, vertical = 2.dp) // 内边距调整
    )
}

封装可复用组件 #

如果需要在多处使用，建议封装成可复用组件，支持自定义样式：

@Composable
fun IconWithCountBadge(
    icon: ImageVector,
    contentDescription: String?,
    count: Int,
    iconTint: Color = Color.Black,
    badgeBgColor: Color = Color.Red,
    badgeTextColor: Color = Color.White,
    badgeTextSize: TextUnit = 12.sp,
    itemSpacing: Dp = 4.dp
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(itemSpacing)
    ) {
        Icon(
            imageVector = icon,
            contentDescription = contentDescription,
            tint = iconTint
        )
        // 仅当计数大于0时显示徽章
        if (count > 0) {
            Text(
                text = count.toString(),
                style = TextStyle(
                    fontSize = badgeTextSize,
                    color = badgeTextColor
                ),
                modifier = Modifier
                    .background(badgeBgColor, shape = RoundedCornerShape(50)) // 全圆角样式
                    .padding(horizontal = 6.dp, vertical = 2.dp)
            )
        }
    }
}

// 调用示例
IconWithCountBadge(
    icon = Icons.Filled.ShoppingCart,
    contentDescription = "购物车图标",
    count = 3
)

关键细节说明 #

• 利用Row的verticalAlignment参数确保图标与计数文本垂直居中对齐
• 通过background修饰符给计数文本添加带圆角的背景色，可根据需求修改RoundedCornerShape的参数调整圆角大小
• 添加计数判断逻辑，避免显示0或负数的无效计数
• 可复用组件支持自定义图标颜色、徽章背景色、文本大小等参数，适配不同场景需求

内容的提问来源于stack exchange，提问作者user20108370