Question

我想在BottomNavigationBar的图标的右上角上显示通知徽章（彩色大理石） >新邮件到达收件箱选项卡时的窗口小部件。它与https://developer.android.com/preview/features/notification-badges.html类似，但对于我的情况，它显示在应用程序中。

有关在现有图标上绘制叠加层以创建自定义图标类的提示吗？

Answer 1

是。可以使用Stack和Positioned窗口小部件堆叠两个图标来完成此操作。

      new BottomNavigationBarItem(
        title: new Text('Home'),
        icon: new Stack(
          children: <Widget>[
            new Icon(Icons.home),
            new Positioned(  // draw a red marble
              top: 0.0,
              right: 0.0,
              child: new Icon(Icons.brightness_1, size: 8.0, 
                color: Colors.redAccent),
            )
          ]
        ),
      )

Answer 2

计数徽章的另一种变体（通过图标堆栈实现，并包装在容器文本中，计数器增加时会拉伸）：

BottomNavigationBarItem(
  icon: new Stack(
    children: <Widget>[
      new Icon(Icons.notifications),
      new Positioned(
        right: 0,
        child: new Container(
          padding: EdgeInsets.all(1),
          decoration: new BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(6),
          ),
          constraints: BoxConstraints(
            minWidth: 12,
            minHeight: 12,
          ),
          child: new Text(
            '$_counter',
            style: new TextStyle(
              color: Colors.white,
              fontSize: 8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      )
    ],
  ),
  title: Text('Notifications'),
),

Answer 3

您也可以嵌套堆栈。例如，如果您想在shopping_cart图标上添加item_count，则可以执行以下操作：

icon: new Stack(
              children: <Widget>[
                new Icon(Icons.shopping_cart),
                new Positioned(
                  top: 1.0,
                  right: 0.0,
                  child: new Stack(
                    children: <Widget>[
                      new Icon(Icons.brightness_1,
                          size: 18.0, color: Colors.green[800]),
                      new Positioned(
                        top: 1.0,
                        right: 4.0,
                        child: new Text(item_count,
                            style: new TextStyle(
                                color: Colors.white,
                                fontSize: 15.0,
                                fontWeight: FontWeight.w500)),
                      )
                    ],
                  ),
                )
              ],
            )

Answer 4

如果您还想处理onTap，请使用此小部件，可以根据需要进一步自定义它：

复制此类：

class NamedIcon extends StatelessWidget {
  final IconData iconData;
  final String text;
  final VoidCallback onTap;
  final int notificationCount;

  const NamedIcon({
    Key key,
    this.onTap,
    @required this.text,
    @required this.iconData,
    this.notificationCount,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        width: 72,
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(iconData),
                Text(text, overflow: TextOverflow.ellipsis),
              ],
            ),
            Positioned(
              top: 0,
              right: 0,
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 6, vertical: 2),
                decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
                alignment: Alignment.center,
                child: Text('$notificationCount'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

用法：

Scaffold(
  appBar: AppBar(
    title: Text('AppBar'),
    actions: [
      NamedIcon(
        text: 'Inbox',
        iconData: Icons.notifications,
        notificationCount: 11,
        onTap: () {},
      ),
      NamedIcon(
        text: 'Mails',
        iconData: Icons.mail,
        notificationCount: 1,
        onTap: () {},
      ),
    ],
  ),
)

Answer 5

我会使用Stack在Icon顶部渲染大理石，将大理石包裹在Positioned，Align或FractionallySizedBox中按照你想要的方式定位它。

Answer 6

如果要在导航栏中单击某项时以编程方式添加徽章。您可以使用此插件： https://pub.dev/packages/bottom_navigation_badge

Answer 7

有一个不错的程序包[0]，使它像使用以下命令而不是使用图标一样简单：

Badge(
  badgeContent: Text('3'),
  child: Icon(Icons.settings),
)

0：https://pub.dev/packages/badges

Answer 8

        Stack(
          children: <Widget>[
            IconButton(
              iconSize: 32,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              padding: EdgeInsets.zero,
              constraints: BoxConstraints(),
              icon: Icon(Icons.notifications,color: AshtarColors.dark_blue,),
              onPressed: () {
                log("notification");
              },
            ),
            new Positioned(
              top: 3,
              right: 0,
              child: new Container(
                padding: EdgeInsets.all(1),
                decoration: new BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(6),
                ),
                constraints: BoxConstraints(
                  minWidth: 15,
                  minHeight: 15,
                ),
                child: new Text('11',
                  style: new TextStyle(
                    color: Colors.white,
                    fontSize: 11,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            )
          ],
        )

在BottomNavigationBar的图标

9 个答案: