Flutter实现App底部tab切换

前言：

        在Android  和iOS  常用的App里面经常有底部切换  原生的实现方法很多 网上也有很多帖子说明 我这里就不展开讲了 今天主要说下flutter 如何实现的

---

效果图：

1 需要用到的知识点 

  StatefulWidget      bottomNavigationBar       等组件

2 具体实现:

代码相对简单 如图

我们在main.dart  用到Scaffold 脚手架框架创建顶部默认导航  然后在Scaffold  里面创建 bottomNavigationBar ()  在 bottomNavigationBar里面的items 里面我们创建底部的tab 

  BottomNavigationBarItem(icon:Icon(Icons.home),title:Text("首页",style:styles,)),  

BottomNavigationBarItem(icon:Icon(Icons.add),title:Text("添加",style:styles,)),

BottomNavigationBarItem(icon:Icon(Icons.settings),title:Text("设置",style:styles,)),

然后我们设置 

currentIndex   

我们现在定义一个变量 var _currentIndex=0; 

在设置   currentIndex:this._currentIndex , 

然后在点击中  需要在 onTap 方法中操作   因为是需要刷新UI  所以要基础可变组件 在 setState方法中操作 

onTap: (int index){

setState(() {

_currentIndex=index;

  });

},

到这一步   底部的切换  基本已经实现了  但是有些同学想要上面的现实界面跟着一起切换这个时候我们要创建3个组件 继承  StatefulWidget        分别是 home  add  setting  

其他两个   add setting  跟这个home类似 我就不贴出来了  如图home.dart

创建好后我们在main.dart里面导入三个组件  我们在main.dart里面创建一个数组来装载3个组件 

Listpagelist=[

Home(),

  Add(),

  Setting()

];

然后我们在body里面设置 需要现实的组件就可以了   body:this.pagelist[this._currentIndex],   这里的 this._currentIndex 是点击的时候在  onTap: (int index){ setState(() { _currentIndex=index; });}, 里面获取的值依次是0 ，1，2 刚好对应 this.pagelist 的下标来对应的加载相应的组件 

---

最后总结：

     这个demo只是实现了tab的切换  home.dart   add .dart   setting.dart 里面只是放了一个text 如果你有自己需求可以自己去添加拓展   个人感觉这个tab的切换比起安卓和iOS 原生代码实现起来都要简单 代码量也比较少 ，我也是一个flutter学习的新手 有兴趣的同学可以私聊多多交流  交流QQ群   :515980159    个人   QQ/微信：1693891473

项目地址 :https://gitee.com/qiuyu123/flutter_tabbar.git