在Jetpack Compose中将徽章隐藏在BadgeBox中

本文介绍了在Jetpack Compose中将徽章隐藏在BadgeBox中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有一个这样的BadgeBox。但如果值为0，我希望徽章消失。如果我将NULL传递给badgeContent，该圆仍会显示，但其中没有任何内容。

如何完全隐藏它？

推荐答案

由于1.1.0-alpha01Badge已从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"
    )
}

这篇关于在Jetpack Compose中将徽章隐藏在BadgeBox中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！