在jetpack中编写如何在图标（喜欢，评论）附近添加数字（计数）

Question

如何在 android jetapck compose 中的图标附近添加数字，我在下面附上了这样的快照。请帮助我解决问题。

Answer 1

您可以使用

BadgedBox

。
使用

offset

修改器更改徽章的位置，使用

containerColor

更改背景颜色。
在 M2 中，背景颜色由

backgroundColor

属性定义。

BadgedBox(
    badge = {
        Badge(
            modifier = Modifier.offset(y=10.dp),
            containerColor=LightGray
        ){
            val badgeNumber = "8"
            Text(
                badgeNumber,
                modifier = Modifier.semantics {
                    contentDescription = "$badgeNumber new notifications"
                }
            )
        }
    }) {
    Icon(
        Icons.Filled.Star,
        contentDescription = "Favorite"
    )
}

Answer 2

您可以使用下面的代码：

@Composable
fun IconsRow() {
    // Update the texts according to your logic
    var favoriteText by remember { mutableStateOf("34") }
    var repeatText by remember { mutableStateOf("12") }
    var chatText by remember { mutableStateOf("12") }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            IconWithNearbyText(
                text = chatText,
                icon = Icons.Outlined.ChatBubbleOutline
            )
            IconWithNearbyText(
                text = repeatText,
                icon = Icons.Outlined.Repeat
            )
            IconWithNearbyText(
                text = favoriteText,
                icon = Icons.Outlined.FavoriteBorder
            )
        }
    }
}

@Composable
fun IconWithNearbyText(
    text: String,
    icon: ImageVector
) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(2.dp)
    ) {
        Icon(imageVector = icon, contentDescription = null)
        Text(text = text)
    }
}