Jetpack：014-Jetpack中的小红点

文章目录

1. 概念介绍
2. 使用方法
- 2.1 Badge
- 2.2 BadgedBox
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack库中底部栏相关的内容，本章回中主要介绍 小红点。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的小红点是指位于导航栏图标右侧的小红点，它通常用来显示提示信息，常见的场景是微信底部导航栏中显示小红点，红点内还有数字，用来显示发来的消息数量。本章回中将介绍如何在底部导航栏中添加小红点。

2. 使用方法

小红点通过Badge可组合函数实现，不过还需要设置它与图标的位置，推荐的做法是使用BadgedBox可组合函数，该函数会自动调整小红点的位置，使用小红点位于图标的右上方。这两个可组合函数都提供了相关的参数来控制自己，接下来我们将分别介绍它们各自的参数。

2.1 Badge

containerColor参数：用来控制小红点的背景颜色，通常是红色；
contentColor参数：用来控制小红点中内容的颜色，通常是白色；
content参数：用来存放小红点中的内容，通常使用Text可组合函数；

除了上面介绍的这些参数外，该可组合函数还有一个modifier通用参数，该参数可以修改小红点的大小。

2.2 BadgedBox

badge参数:主要用来存放小红点，把Badge可组合函数赋值给它就可以；
content参数:主要用来存放小红点附属的图标，通常使用Icon可组合函数给它赋值；

此外，content参数是可组合函数类型，而且是最后一个参数，因此可以使用尾lambda的语法给它赋值。我们将在后面的小节中通过示例代码来演示具体的用法。该函数会自动调整小红点的位置，使小红点位于content参数对应图标的右上方。

3. 示例代码

//设置bar上的图标
icon = {
    //在bar的图标上创建小红点,不过不能调整小红点的位置
    BadgedBox(
        modifier = Modifier.align(Alignment.CenterVertically),
        badge = {
            //依据条件显示小红点：选中时才显示小红点
            if(selectedItem == index)
            Badge(
                //调整小红点的大小
                modifier = Modifier.size(16.dp),
                containerColor = Color.Red,
                contentColor = Color.White,
                content = {Text(text = "6")},
            )else
                null
        },
    ) {
        Icon(imageVector = item.icon, contentDescription = null )
    }
},

上面的示例代码中演示了Badge和BadgedBox两个可组合函数的用法，同时把BadgedBox可组合函数赋值给了NavigationBarItem的icon参数，也就是代码中最开始的icon，而与这个icon真正对应的图标位于代码最后的Icon函数中，代码中的小红点就位于这个ionc的右上方。

此外，我们还在代码中做了判断处理，如果当前图标被选中了才显示小红点，否则不显示小红点，这属于业务逻辑，大家可以依据项目需求自行设定。下面是程序的运行效果图：
在这里插入图片描述