文章目录
- 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的右上方。
此外，我们还在代码中做了判断处理，如果当前图标被选中了才显示小红点，否则不显示小红点，这属于业务逻辑，大家可以依据项目需求自行设定。下面是程序的运行效果图：
4. 内容总结
最后，我们对本章回的内容做一个总结：
- 小红点通常附属在某个图标的右上方，主要用来显示提示性消息；
- 小红点通过可组合函数Badge实现，不过需要手动调整它与图标的位置；
- 可组合函数BadgedBox可以配合Badge实现小红点，而且会自动调整小红点的位置；
看官们，关于Jetpack中小红点相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！
