Android Jetpack Compose 如何在Image组件上显示徽章角标

下面是两种生产环境常用的可行实现方案：

方案1：自定义Box层叠实现（无额外依赖，灵活性最高） #

核心逻辑是用Box容器层叠Image和角标组件，通过对齐规则+偏移量调整角标位置：

Box(
    modifier = Modifier.size(100.dp), // 按需调整整体容器尺寸
    contentAlignment = Alignment.TopEnd // 角标默认对齐右上角
) {
    // 底层展示的图片
    Image(
        painter = painterResource(id = R.drawable.your_target_image),
        contentDescription = null,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.Crop
    )
    // 上层绿色圆形角标
    Box(
        modifier = Modifier
            .size(16.dp) // 角标尺寸按需调整
            .offset((-4).dp, 4.dp) // 微调位置避免完全贴边
            .background(
                color = Color.Green,
                shape = CircleShape
            )
            .border(1.dp, Color.White, CircleShape) // 可选：加白色边框和图片背景做区分
    )
    
    // 如果需要带数字的角标，替换上方角标代码即可：
    /*
    Box(
        modifier = Modifier
            .size(20.dp)
            .offset((-4).dp, 4.dp)
            .background(Color.Green, CircleShape),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "5", color = Color.White, fontSize = 12.sp)
    }
    */
}

方案2：使用官方Material3 Badge组件（代码最简洁） #

如果项目已经引入了Compose Material3依赖，可以直接用官方封装的BadgedBox、Badge组件实现：

BadgedBox(
    badge = {
        Badge(
            modifier = Modifier.offset(4.dp, (-4).dp), // 调整角标位置
            containerColor = Color.Green
        )
        // 带数字角标写法：
        // Badge(containerColor = Color.Green) { Text(text = "2") }
    },
    modifier = Modifier.size(100.dp)
) {
    Image(
        painter = painterResource(id = R.drawable.your_target_image),
        contentDescription = null,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.Crop
    )
}

通用调整说明 #

• 角标尺寸、颜色可以直接修改对应参数自定义
• 角标偏移量offset第一个参数为X轴偏移（正右负左），第二个参数为Y轴偏移（正下负上），可根据视觉需求自由调整

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