颤振更新BottomNavigationBar [英] Flutter update BottomNavigationBar

问题描述

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

解决方案

我认为使用起来更优雅

 类BottomBarExample扩展了StatefulWidget {
 @override 
 _BottomBarExampleState createState（）=> new _BottomBarExampleState（）; 
} 
 
 class _BottomBarExampleState扩展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 ：（索引）{
 this._c.animateToPage（index，duration：const Duration（milliseconds：500），curve：Curves.easeInOut）; 
}，
项目：< BottomNavigationBarItem> [
 new BottomNavigationBarItem（icon：new Icon（Icons.supervised_user_circle），标题：new Text（ Users）），
 new BottomNavigationBarItem（icon：new Icon（Icons.notifications），标题： new Text（ Alerts）），
 new BottomNavigationBarItem（icon：new Icon（Icons.email），title：new Text（ Inbox）），
 
]，
 
），
正文：new PageView（
 controller：_c，
 onPageChanged：（newPage）{
 setState（（）{
 this._page = newPage; 
}）; 
}，
个子级：< Widget> [
 new Center（
子项：new Column（
 mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [
 new Icon（Icons.supervised_user_circle），
 new Text（ Users）
]，
），
），
 new Center（
子级：new Column（
 mainAxisAlignment：MainAxisAlignment.center ，
个孩子：< Widget> [
个新图标（Icons.notifications），
个新Text（ Alerts）
]，
），
），
新Center（
子项：new Column（
 mainAxisAlignment：MainAxisAlignment.center，
子项：< Widget> [
新Icon（Icons.mail ），
 new Text（ Inbox）
]，
），
），
]，
），
）; 
} 
} 
  

I am using a BottomNavigationBar together with a TabController. By clicking on the different Tabs of the BottomNavigationBar the TabView is changing the content. However if I swipe on the TabView to switch to another view/tab the BottomNavigationBar is not updating to the tab I swiped to. I already have added a listener to the TabController to detect changes. But how can I update BottomNavigationBar programmatically to reflect the change?

解决方案

I think it is way more elegant to use PageView instead of TabBarView specially in your case.

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")
              ],
            ),
          ),
        ],
      ),
    );
  }
}

这篇关于颤振更新BottomNavigationBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！