我正在将BottomNavigationBar与TabController一起使用。
通过单击BottomNavigationBar的不同选项卡,TabView会更改内容。
但是,如果我在TabView上滑动以切换到另一个 View /选项卡,则BottomNavigationBar不会更新为我滑动至的选项卡。
我已经在TabController中添加了一个监听器以检测更改。
但是,如何以编程方式更新BottomNavigationBar以反射(reflect)更改?

最佳答案

我认为在您的情况下特别使用 PageView 而不是TabBarView更为优雅。

dart -  flutter 更新BottomNavigationBar-LMLPHP

class BottomBarExample extends StatefulWidget {
  @override
  _BottomBarExampleState createState() => new _BottomBarExampleState();
}

class _BottomBarExampleState extends State<BottomBarExample> {
  int _page = 0;
  PageController _c;
  @override
  void initState(){
    _c =  new PageController(
      initialPage: _page,
    );
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      bottomNavigationBar: new BottomNavigationBar(
        currentIndex: _page,
        onTap: (index){
          this._c.animateToPage(index,duration: const Duration(milliseconds: 500),curve: Curves.easeInOut);
        },
        items: <BottomNavigationBarItem>[
        new BottomNavigationBarItem(icon: new Icon(Icons.supervised_user_circle), title: new Text("Users")),
        new BottomNavigationBarItem(icon: new Icon(Icons.notifications), title: new Text("Alerts")),
        new BottomNavigationBarItem(icon: new Icon(Icons.email), title: new Text("Inbox")),

      ],

      ),
      body: new PageView(
        controller: _c,
        onPageChanged: (newPage){
          setState((){
            this._page=newPage;
          });
        },
        children: <Widget>[
          new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.supervised_user_circle),
                new Text("Users")
              ],
            ),
          ),
          new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.notifications),
                new Text("Alerts")
              ],
            ),
          ),
          new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(Icons.mail),
                new Text("Inbox")
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关于dart - flutter 更新BottomNavigationBar,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49781227/

10-09 10:01