如何在flutter中更改setState（）函数中的底部导航栏图标？

Question

我正在快速开发一个食品订购应用程序。我想要的是，当用户将商品添加到购物车时，我希望底部导航栏中的购物车图标在顶部获得一个红点，以通知用户商品已添加到购物车。

[为了实现这一点，我创建了一个名为no_of_cart_items的全局变量，当用户将商品添加到购物车时，我按如下所示在setState()函数中递增此变量：

setState(() {
  GlobalVariables.no_of_cart_items+=1;
  // change icon here
});

在此setState()功能中，我希望更改底部导航栏中的图标。我应该怎么做？谢谢。

编辑

这是我在main.dart中的代码

return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          resizeToAvoidBottomPadding: false,
          body: callpage(_currentindex),
          bottomNavigationBar: BottomNavigationBar(
              elevation: 10,
              currentIndex: _currentindex,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.account_circle),
                  title: Text('Profile'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.restaurant_menu),
                  title: Text('Menu'),
                ),
                BottomNavigationBarItem(
                  title: Text('Cart'),
                  icon: Badge(
                    badgeContent: Text(
                      GlobalVariables.no_of_cart_items.toString(),
                      style: TextStyle(
                        color: Colors.white
                      ),
                    ),
                    child: Icon(Icons.shopping_cart)
                  )
                ),
              ],
              onTap: (index){
                setState(() {
                  _currentindex=index;
                });               
              }
          ),
        ),
        theme: appTheme,
      );

这是我的menu.dart文件。在这里，有两个按钮：每个菜盘的plus和minus可以从购物车中添加或减去它，在这些按钮的onTap()功能中，我想在底部设置购物车图标的徽章导航

return Container(
      margin: const EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.black12),
          borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Image(
              image: NetworkImage('https://www.whiskaffair.com/wp-content/uploads/2018/08/Mumbai-Pav-Bhaji-4.jpg'),
              width: 80,
              height: 80
          ),
          SizedBox(width:10),
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
            child: Container(
              width:190,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    widget.menuitem[0],
                    style: TextStyle(
                        fontSize:19,
                        color: Colors.grey[900]
                    ),
                  ),
                  SizedBox(height:5.0),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
                    child: Row(
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            Text(
                              '₹',
                              style: TextStyle(
                                  fontSize: 15,
                                  color: Colors.grey[800]
                              ),
                            ),
                            Text(
                              widget.menuitem[1].toString(),
                              style: TextStyle(
                                fontSize: 15,
                                color: Colors.grey[800]
                              ),
                            )
                          ],
                        ),
                        SizedBox(width:70),
                        Container(
                            child: Row(
                              children: <Widget>[
                                SizedBox(
                                  width:30,
                                  height:30,
                                  child: FloatingActionButton(
                                    onPressed: (){
                                      setState(() {
                                        if(GlobalVariables.allcartitems[widget.menuitem[0]][0]>0){
                                          GlobalVariables.no_of_cart_items-=1;
                                          GlobalVariables.allcartitems[widget.menuitem[0]][0]-=1;
                                          GlobalVariables.totalcost-=GlobalVariables.allcartitems[widget.menuitem[0]][1];
                                        }

                                      });
                                    },
                                    elevation: 1,
                                    child: Icon(Icons.remove, size: 18),
                                    backgroundColor: Colors.red[300],
                                    mini: true,
                                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5.0))),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
                                  child: Text(
                                    GlobalVariables.allcartitems[widget.menuitem[0]][0].toString(),
                                    style: TextStyle(
                                        fontSize: 18
                                    ),
                                  ),
                                ),
                                SizedBox(
                                  width:30,
                                  height:30,
                                  child: FloatingActionButton(
                                    onPressed: (){
                                      setState(() {
                                        GlobalVariables.no_of_cart_items+=1;
                                        GlobalVariables.allcartitems[widget.menuitem[0]][0]+=1;
                                        GlobalVariables.totalcost+=GlobalVariables.allcartitems[widget.menuitem[0]][1];
                                        // set badge for cart icon
                                      });
                                    },
                                    elevation: 1,
                                    child: Icon(Icons.add, size: 20),
                                    backgroundColor: Colors.green[300],
                                    mini:true,
                                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5.0))),
                                  ),
                                )
                              ],
                            )
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );

Answer 1

您可以使用Badge而不是更改整个图标来表示已添加到购物车的项目Badge套件：https://pub.dev/packages/badges更新：用于实施徽章：

var p1badge = false;
var p2badge = false;
List<BottomNavigationBarItem> buildBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
          icon: Badge(
            showBadge: p1badge,
            child: Icon(Icons.filter_1),
          ),
          title: Text('Page-1')),
      BottomNavigationBarItem(
          icon: Badge(
            showBadge: p2badge,
            child: Icon(Icons.filter_2),
          ),
          title: Text('Page-2'))
    ];
  }

使用VoidCallback更新徽章：

class Page1 extends StatelessWidget {
  VoidCallback onP1Badge;

  Page1({this.onP1Badge});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text('P1 BADGE'),
          onPressed: () {onP1Badge();},
        ),
      ],
    );
  }
}

将p1badge的值更改为true并调用setState()：

pages = [
      Page1(
        onP1Badge: () {
          p1badge = true;
          setState(() {});
        },
      ),
      Page2()
    ];