Android

关注公众号 jb51net

关闭
首页 > 软件编程 > Android > Android Badge组件

Android利用Badge组件实现未读消息小红点

作者：岛上码农

在 App 的运营中，活跃度是一个重要的指标，日活/月活……为了提高活跃度，就发明了小红点。这一篇，来介绍一个徽标（Badge）组件，能够快速搞定应用内的小红点，希望对大家有所帮助

前言

在 App 的运营中，活跃度是一个重要的指标，日活/月活……为了提高活跃度，就发明了小红点，然后让强迫症用户“没法活”。

小红点虽然很讨厌，但是为了 KPI，程序员也不得不屈从运营同学的逼迫（讨好），得想办法实现。这一篇，来介绍一个徽标（Badge）组件，能够快速搞定应用内的小红点。

Badge 组件

Badge 组件被 Flutter 官方推荐，利用它让小红点的实现非常轻松，只需要2个步骤就能搞定。

1.引入依赖

在 pubspec.yaml文件种引入相应版本的依赖，如下所示。

badges: ^2.0.3

2.将需要使用小红点的组件使用 Badge 作为上级组件，设置小红点的位置、显示内容、颜色（没错，也可以改成小蓝点）等参数，示例代码如下所示。

Badge(
  badgeContent: Text('3'),
  position: BadgePosition.topEnd(top: -10, end: -10),
  badgeColor: Colors.blue,
  child: Icon(Icons.settings),
)

position可以设置徽标在组件的相对位置，包括右上角（topEnd）、右下角（bottomEnd）、左上角（topStart）、左下角（bottomStart）和居中（center）等位置。并可以通过调整垂直方向和水平方向的相对位置来进行位置的细微调整。当然，Badge 组件考虑了很多应用场景，因此还有其他的一些参数：

总的来说，这些参数能够满足所有需要使用徽标的场景了。

实例

我们来看一个实例，我们分别在导航栏右上角、内容区和底部导航栏使用了三种类型的徽标，实现效果如下。

其中导航栏的代码如下，这是 Badge 最简单的实现方式了。

AppBar(
  title: const Text('Badge Demo'),
  actions: [
    Badge(
      showBadge: _badgeNumber > 0,
      padding: const EdgeInsets.all(4.0),
      badgeContent: Text(
        _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
        textAlign: TextAlign.center,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 11.0,
        ),
      ),
      position: BadgePosition.topEnd(top: 4, end: 4),
      child: IconButton(
        onPressed: () {},
        icon: const Icon(
          Icons.message_outlined,
          color: Colors.white,
        ),
      ),
    ),
  ],
),

内容区的徽标代码如下，这里使用了渐变色填充，动画形式为缩放，并且将徽标放到了左上角，注意如果使用了渐变色那么会覆盖 badgeColor 指定的背景色。

Badge(
  showBadge: _badgeNumber > 0,
  padding: const EdgeInsets.all(6.0),
  badgeContent: Text(
    _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
    textAlign: TextAlign.center,
    style: const TextStyle(
      color: Colors.white,
      fontSize: 10.0,
    ),
  ),
  position: BadgePosition.topStart(top: -10, start: -10),
  badgeColor: Colors.blue,
  animationType: BadgeAnimationType.scale,
  elevation: 0.0,
  gradient: const LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [
      Colors.red,
      Colors.orange,
      Colors.green,
    ],
  ),
  child: Image.asset(
    'images/girl.jpeg',
    width: 200,
    height: 200,
  ),
),

底部导航栏的代码如下所示，这里需要注意，Badge 组件会根据内容区的尺寸自动调节大小，底部导航栏的显示控件有限，推荐使用小红点（不用数字标识）即可。

BottomNavigationBar(items: [
  BottomNavigationBarItem(
    icon: Badge(
        showBadge: _badgeNumber > 0,
        padding: const EdgeInsets.all(2.0),
        badgeContent: Text(
          _badgeNumber < 99 ? _badgeNumber.toString() : '99+',
          textAlign: TextAlign.center,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 11.0,
          ),
        ),
        position: BadgePosition.topEnd(top: -4, end: -6),
        animationType: BadgeAnimationType.fade,
        child: const Icon(Icons.home_outlined)),
    label: '首页',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.star_border,
    ),
    label: '推荐',
  ),
  const BottomNavigationBarItem(
    icon: Icon(
      Icons.account_circle_outlined,
    ),
    label: '我的',
  ),
]),

总结

本篇介绍了使用 Badge 组件实现小红点徽标组件。可以看到，Badge 组件的使用非常简单，相比我们自己从零写一个 Badge 组件来说，使用它可以让我们省时省力、快速地完成运营同学要的小红点。本篇源码已上传至：实用组件相关代码。

到此这篇关于Android利用Badge组件实现未读消息小红点的文章就介绍到这了,更多相关Android Badge组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文