8.2 图标组件加 Badge 提示

8.2 图标组件加 Badge 提示

效果

img

实现步骤：

第 1 步：输入接口

1
2
3
4
/// 图标组件
class IconWidget extends StatelessWidget {
  ...
  final String? badgeString; // Badge 文字

第 2 步：build 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@override
Widget build(BuildContext context) {
  ...

  // 文字、数字
  if (badgeString != null) {
    return Badge(
      badgeContent: Text(
        badgeString!,
        style: TextStyle(
          color: AppColors.onPrimary,
          fontSize: 9,
        ),
      ),
      position: BadgePosition.topEnd(top: -7, end: -8),
      elevation: 0,
      badgeColor: AppColors.primary,
      padding: const EdgeInsets.all(4.0),
      child: icon,
    );
  }

第 3 步：main 视图中加入

lib/pages/system/main/view.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 主视图
Widget _buildView() {
  ...
			items: [
              NavigationItemModel(
                label: LocaleKeys.tabBarHome.tr,
                icon: AssetsSvgs.navHomeSvg,
              ),
              NavigationItemModel(
                label: LocaleKeys.tabBarCart.tr,
                icon: AssetsSvgs.navCartSvg,
                count: 3, // 购物车数量
              ),
              NavigationItemModel(
                label: LocaleKeys.tabBarMessage.tr,
                icon: AssetsSvgs.navMessageSvg,
                count: 9, // 新消息数量
              ),
              NavigationItemModel(
                label: LocaleKeys.tabBarProfile.tr,
                icon: AssetsSvgs.navProfileSvg,
              ),
            ],

后期可以用 obs 响应变量更新

提交代码到 git