前言：
在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
网友评论