在 Jetpack Compose 的 BadgeBox 中隐藏徽章

Question

BadgeBox(badgeContent = { Text("8") }) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Favorite"
    )
}

我有一个BadgeBox这样的。但如果值为0，我希望徽章消失。如果我将 null 传递给badgeContent，圆圈仍然会显示，但里面什么也没有。

我怎样才能完全隐藏它？

Answer 1

由于1.1.0 Badge已从 移出BadgeBox，因此如果您使用 Compose 版本1.1.x或更高版本，则可以按如下方式使用它：

BadgedBox(
    badge = {
        if (count > 0) {
            Badge {
                Text("$count")
            }
        }
    }
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Favorite"
    )
}

版本1.0.x的解决方案。

backgroundColor当不需要显示徽章时，可以指定为透明颜色：

BadgeBox(
    badgeContent = {
        if (count > 0) {
            Text("$count")
        }
    },
    backgroundColor = if (count > 0) MaterialTheme.colors.error else Color.Transparent
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Favorite"
    )
}