Android利用Badge組件實現(xiàn)未讀消息小紅點

更新時間：2023年01月14日 08:26:06 作者：島上碼農(nóng)

在?App?的運營中，活躍度是一個重要的指標(biāo)，日活/月活……為了提高活躍度，就發(fā)明了小紅點。這一篇，來介紹一個徽標(biāo)（Badge）組件，能夠快速搞定應(yīng)用內(nèi)的小紅點，希望對大家有所幫助

前言

在 App 的運營中，活躍度是一個重要的指標(biāo)，日活/月活……為了提高活躍度，就發(fā)明了小紅點，然后讓強迫癥用戶“沒法活”。

小紅點雖然很討厭，但是為了 KPI，程序員也不得不屈從運營同學(xué)的逼迫（討好），得想辦法實現(xiàn)。這一篇，來介紹一個徽標(biāo)（Badge）組件，能夠快速搞定應(yīng)用內(nèi)的小紅點。

Badge 組件

Badge 組件被 Flutter 官方推薦，利用它讓小紅點的實現(xiàn)非常輕松，只需要2個步驟就能搞定。

1.引入依賴

在 pubspec.yaml文件種引入相應(yīng)版本的依賴，如下所示。

badges: ^2.0.3

2.將需要使用小紅點的組件使用 Badge 作為上級組件，設(shè)置小紅點的位置、顯示內(nèi)容、顏色（沒錯，也可以改成小藍點）等參數(shù)，示例代碼如下所示。

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

position可以設(shè)置徽標(biāo)在組件的相對位置，包括右上角（topEnd）、右下角（bottomEnd）、左上角（topStart）、左下角（bottomStart）和居中（center）等位置。并可以通過調(diào)整垂直方向和水平方向的相對位置來進行位置的細(xì)微調(diào)整。當(dāng)然，Badge 組件考慮了很多應(yīng)用場景，因此還有其他的一些參數(shù)：

elevation：陰影偏移量，默認(rèn)為2，可以設(shè)置為0消除陰影；
gradient：漸變色填充背景；
toAnimate：徽標(biāo)內(nèi)容改變后是否啟用動效哦，默認(rèn)有動效。
shape：徽標(biāo)的形狀，默認(rèn)是原型，也可以設(shè)置為方形，設(shè)置為方形的時候可以使用 borderRadius 屬性設(shè)置圓角弧度。
borderRadius：圓角的半徑。
animationType：內(nèi)容改變后的動畫類型，有漸現(xiàn)（fade）、滑動（slide）和縮放（scale）三種效果。
showBadge：是否顯示徽標(biāo)，我們可以利用這個控制小紅點的顯示與否，比如沒有提醒的時候該值設(shè)置為 false 即可隱藏掉小紅點。

總的來說，這些參數(shù)能夠滿足所有需要使用徽標(biāo)的場景了。

實例

我們來看一個實例，我們分別在導(dǎo)航欄右上角、內(nèi)容區(qū)和底部導(dǎo)航欄使用了三種類型的徽標(biāo)，實現(xiàn)效果如下。

其中導(dǎo)航欄的代碼如下，這是 Badge 最簡單的實現(xiàn)方式了。

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

內(nèi)容區(qū)的徽標(biāo)代碼如下，這里使用了漸變色填充，動畫形式為縮放，并且將徽標(biāo)放到了左上角，注意如果使用了漸變色那么會覆蓋 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,
  ),
),

底部導(dǎo)航欄的代碼如下所示，這里需要注意，Badge 組件會根據(jù)內(nèi)容區(qū)的尺寸自動調(diào)節(jié)大小，底部導(dǎo)航欄的顯示控件有限，推薦使用小紅點（不用數(shù)字標(biāo)識）即可。

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: '我的',
  ),
]),