我一直在使用BottomNavigationBar,但无法在BottomNavigationBar的onTap回调之外以编程方式选择Tab。
使用onTap回调的代码可以正常工作:
return new BottomNavigationBar( items: <BottomNavigationBarItem>[ _bottomNavigationItem(Icons.account_circle, DrawerTitles.CONTACTS), _bottomNavigationItem(Icons.delete, DrawerTitles.DELETED_CONTACTS), _bottomNavigationItem(Icons.list, DrawerTitles.LOGS), ], onTap: (int index) { setState(() { navigationIndex = index; switch (navigationIndex) { case 0: handleBottomNavigationBarClicks(DrawerTitles.CONTACTS); break; case 1: handleBottomNavigationBarClicks(DrawerTitles.DELETED_CONTACTS); break; case 2: handleBottomNavigationBarClicks(DrawerTitles.LOGS); break; } }); }, currentIndex: navigationIndex, fixedColor: Colors.blue[400], type: BottomNavigationBarType.fixed, );
但是我想在onTap回调之外更改选项卡。
我试过在onTap回调之外更改BottomNavigatioBar所使用的索引,但是没有用。
这是我尝试过的:
void changeTabs(int tabIndex) { setState(() { navigationIndex = tabIndex; });}
这是代码的要点。
有什么方法可以更改选项卡吗?
这是有关如何实现所需目标的完整示例。
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); const String page1 = "Page 1"; const String page2 = "Page 2"; const String page3 = "Page 3"; const String title = "BNB Demo"; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: title, home: new MyHomePage(title: title), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { List<Widget> _pages; Widget _page1; Widget _page2; Widget _page3; int _currentIndex; Widget _currentPage; @override void initState() { super.initState(); _page1 = Page1(); _page2 = Page2(); _page3 = Page3(); _pages = [_page1, _page2, _page3]; _currentIndex = 0; _currentPage = _page1; } void changeTab(int index) { setState(() { _currentIndex = index; _currentPage = _pages[index]; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: _currentPage, bottomNavigationBar: BottomNavigationBar( onTap: (index) => changeTab(index), currentIndex: _currentIndex, items: [ BottomNavigationBarItem( title: Text(page1), icon: Icon(Icons.account_circle)), BottomNavigationBarItem( title: Text(page2), icon: Icon(Icons.account_circle)), BottomNavigationBarItem( title: Text(page3), icon: Icon(Icons.account_circle)) ]), drawer: new Drawer( child: new Container( margin: EdgeInsets.only(top: 20.0), child: new Column( children: <Widget>[ navigationItemListTitle(page1, 0), navigationItemListTitle(page2, 1), navigationItemListTitle(page3, 2), ], ), ), ), ); } Widget navigationItemListTitle(String title, int index) { return new ListTile( title: new Text( title, style: new TextStyle(color: Colors.blue[400], fontSize: 22.0), ), onTap: () { Navigator.pop(context); changeTab(index); }, ); } } class Page1 extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text(page1), ); } } class Page2 extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text(page2), ); } } class Page3 extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text(page3), ); } }
每当您想更改为标签页时, changeTab(YOUR_TAB_INDEX)
changeTab(YOUR_TAB_INDEX)