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 )
    }
},

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

此外,我们还在代码中做了判断处理,如果当前图标被选中了才显示小红点,否则不显示小红点,这属于业务逻辑,大家可以依据项目需求自行设定。下面是程序的运行效果图:
Jetpack:014-Jetpack中的小红点_第1张图片

4. 内容总结

最后,我们对本章回的内容做一个总结:

  • 小红点通常附属在某个图标的右上方,主要用来显示提示性消息;
  • 小红点通过可组合函数Badge实现,不过需要手动调整它与图标的位置;
  • 可组合函数BadgedBox可以配合Badge实现小红点,而且会自动调整小红点的位置;

看官们,关于Jetpack中小红点相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,AndroidJetPack吧,移动开发,Jetpack,compose,图标信息提示小红点,badge)