Jetpack Compose中BottomNavigation搭配BadgeBox实现底部导航栏

                                                                                                                                                        先上效果图

 再上代码块

@ExperimentalMaterialApi
@Composable
@Preview(showBackground = true)
fun IndexBottomNavigation() {
    var selectedIndex by remember { //选中的index
        mutableStateOf(0)//默认选中第一个
    }
    BottomNavigation() {
        BottomNavigationItem(
            selected = selectedIndex == 0, //selectedIndex和当前的index相同则为选中状态
            onClick = { selectedIndex = 0 },//将selectedIndex置为当前index
            icon = {//图标设置
                Icon(
                    imageVector = Icons.Filled.Home,
                    contentDescription = ""
                )
            },
            label = {//图标下的文字显示
                Text(text = "首页")
            },
            alwaysShowLabel = selectedIndex == 0//是否显示文字，这里设置为选中时显示文字，否则不显示
        )
        BottomNavigationItem(
            selected = selectedIndex == 1,
            onClick = { selectedIndex = 1 },
            icon = {
                if (selectedIndex == 1){//选中时不展示Badge
                    Icon(imageVector = Icons.Filled.MobileFriendly, contentDescription = "")
                } else{
                    BadgeBox( //用来展示未读消息数量
                        badgeContent = {
                            Text(text = "16")
                        }
                    ) {
                        Icon(imageVector = Icons.Filled.MobileFriendly, contentDescription = "")
                    }

                }
            },
            label = {
                Text(text = "通讯录")
            },
            alwaysShowLabel = selectedIndex == 1
        )
        BottomNavigationItem(
            selected = selectedIndex == 2,
            onClick = { selectedIndex = 2 },
            icon = {
                Icon(imageVector = Icons.Filled.People, contentDescription = "")
            },
            label = {
                Text(text = "我的")
            },
            alwaysShowLabel = selectedIndex == 2
        )
    }
}