我们在本章回中介绍的小红点是指位于导航栏图标右侧的小红点,它通常用来显示提示信息,常见的场景是微信底部导航栏中显示小红点,红点内还有数字,用来显示发来的消息数量。本章回中将介绍如何在底部导航栏中添加小红点。
小红点通过Badge
可组合函数实现,不过还需要设置它与图标的位置,推荐的做法是使用BadgedBox
可组合函数,该函数会自动调整小红点的位置,使用小红点位于图标的右上方。这两个可组合函数都提供了相关的参数来控制自己,接下来我们将分别介绍它们各自的参数。
除了上面介绍的这些参数外,该可组合函数还有一个modifier
通用参数,该参数可以修改小红点的大小。
此外,content参数是可组合函数类型,而且是最后一个参数,因此可以使用尾lambda的语法给它赋值。我们将在后面的小节中通过示例代码来演示具体的用法。该函数会自动调整小红点的位置,使小红点位于content参数对应图标的右上方。
//设置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的右上方。
此外,我们还在代码中做了判断处理,如果当前图标被选中了才显示小红点,否则不显示小红点,这属于业务逻辑,大家可以依据项目需求自行设定。下面是程序的运行效果图:
最后,我们对本章回的内容做一个总结:
看官们,关于Jetpack中小红点相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!