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

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

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

前言

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

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

Badge 組件

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

1.引入依賴

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

badges: ^2.0.3

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

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 組件考慮了很多應用場景，因此還有其他的一些參數(shù)：

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

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

實例

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

其中導航欄的代碼如下，這是 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,
        ),
      ),
    ),
  ],
),

內容區(qū)的徽標代碼如下，這里使用了漸變色填充，動畫形式為縮放，并且將徽標放到了左上角，注意如果使用了漸變色那么會覆蓋 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 組件會根據(jù)內容區(qū)的尺寸自動調節(jié)大小，底部導航欄的顯示控件有限，推薦使用小紅點（不用數(shù)字標識）即可。

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