介紹一個令強迫症討厭的小紅點元件

語言: CN / TW / HK
時間 2023-01-14 12:15:09

theme: v-green highlight:

前言

在 App 的運營中，活躍度是一個重要的指標，日活/月活……為了提高活躍度，就發明了小紅點，然後讓強迫症使用者“沒法活”。

image.png

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

Badge 元件

Badge 元件被 Flutter 官方推薦，利用它讓小紅點的實現非常輕鬆，只需要2個步驟就能搞定。

  1. 引入依賴

在 pubspec.yaml檔案種引入相應版本的依賴，如下所示。 yaml badges: ^2.0.3

  1. 將需要使用小紅點的元件使用 Badge 作為上級元件，設定小紅點的位置、顯示內容、顏色（沒錯，也可以改成小藍點）等引數，示例程式碼如下所示。 dart 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 元件考慮了很多應用場景，因此還有其他的一些引數：

  2. elevation：陰影偏移量，預設為2，可以設定為0消除陰影；

  3. gradient：漸變色填充背景；
  4. toAnimate：徽標內容改變後是否啟用動效哦，預設有動效。
  5. shape：徽標的形狀，預設是原型，也可以設定為方形，設定為方形的時候可以使用 borderRadius 屬性設定圓角弧度。
  6. borderRadius：圓角的半徑。
  7. animationType：內容改變後的動畫型別，有漸現（fade）、滑動（slide）和縮放（scale）三種效果。
  8. showBadge：是否顯示徽標，我們可以利用這個控制小紅點的顯示與否，比如沒有提醒的時候該值設定為 false 即可隱藏掉小紅點。

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

例項

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

badge.gif

其中導航欄的程式碼如下，這是 Badge 最簡單的實現方式了。 dart 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 指定的背景色。 dart 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 元件會根據內容區的尺寸自動調節大小，底部導航欄的顯示控制元件有限，推薦使用小紅點（不用數字標識）即可。 dart 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 元件來說，使用它可以讓我們省時省力、快速地完成運營同學要的小紅點。本篇原始碼已上傳至：實用元件相關程式碼。

我是島上碼農，微信公眾號同名。如有問題可以加本人微信交流，微訊號：island-coder。

👍🏻：覺得有收穫請點個贊鼓勵一下！

🌟：收藏文章，方便回看哦！

💬：評論交流，互相進步！

「」
「」