我正在将BottomNavigationBar与TabController一起使用。
通过单击BottomNavigationBar的不同选项卡,TabView会更改内容。
但是,如果我在TabView上滑动以切换到另一个 View /选项卡,则BottomNavigationBar不会更新为我滑动至的选项卡。
我已经在TabController中添加了一个监听器以检测更改。
但是,如何以编程方式更新BottomNavigationBar以反射(reflect)更改?
最佳答案
我认为在您的情况下特别使用 PageView
而不是TabBarView
更为优雅。
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/