如何在Jetpack Compose中创建带数字角标的邮件图标

你的代码里角标是居中显示的，没定位到图标右上角，而且固定尺寸会导致多位数数字溢出。按下面的方式修改就能实现标准的右上角角标效果：

@Composable
fun NumberedIcon(number: Int, iconRes: Int) {
    Box(modifier = Modifier.size(48.dp), contentAlignment = Alignment.Center) {
        Image(
            painter = painterResource(id = iconRes),
            contentDescription = "邮件图标",
            modifier = Modifier.size(32.dp),
            alpha = 0.8f
        )
        // 处理数字显示，超过99显示99+
        val badgeText = if (number > 99) "99+" else number.toString()
        
        Box(
            modifier = Modifier
                .align(Alignment.TopEnd) // 定位到父Box的右上角
                .wrapContentSize() // 宽度随文字自适应
                .background(Color.Red, shape = CircleShape)
                .padding(horizontal = 6.dp, vertical = 2.dp), // 用padding控制角标大小
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = badgeText,
                fontSize = 12.sp,
                color = Color.White,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

关键修改点： #

• 角标定位：用align(Alignment.TopEnd)把角标固定在父容器的右上角，替代原来的居中对齐，这是实现角标效果的核心。
• 自适应尺寸：去掉固定的size(24.dp)，改用wrapContentSize()让角标宽度随数字长度自动调整，再通过padding控制内边距，保证单个数字时也有合适的圆形大小。
• 优化显示逻辑：添加了数字超过99时显示"99+"的处理，避免长数字撑大角标破坏布局。
• 样式优化：把角标背景改成红色、文字白色，符合常规通知角标的视觉样式，添加字体加粗让数字更醒目。

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