Flutter 利用BottomNavigationBar实现Tab切换

最新推荐文章于 2024-09-21 15:43:23 发布

ShunQ-Wang

最新推荐文章于 2024-09-21 15:43:23 发布

阅读量1.6k

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/u013552863/article/details/85157701

版权

Flutter 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、代码

class Tabs extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _Tab();
}

class _Tab extends State<Tabs> {
  int _currentIndex = 0;

  List tabs = [
    {'key': 'Tab1', },
    {'key': 'Tab2', },
    {'key': 'Tab3',}
  ];

  var pages ;

  initData(){
   pages = [new Home('Tab1'), new Home1('Tab2'), new Home2('Tab3')];
  }

  @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(
        body: pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text(tabs[0]['key'])),
            new BottomNavigationBarItem(
                icon: Icon(Icons.category), title: Text(tabs[1]['key'])),
            new BottomNavigationBarItem(
                icon: Icon(Icons.my_location), title: Text(tabs[2]['key']))
          ],
          type: BottomNavigationBarType.fixed,
          iconSize: 24,
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ));
  }

  Widget buildItem(BuildContext context, int index) => ListDemo(context, index);
}

2、效果图