ios 点击出现另外一套tabbar_六、Flutter自定义Tabbar

目录

一、效果展示

二、底部Tabbar

三、顶部Tabbar

一、效果展示

底部Tabbar切换和顶部Tabbar切换在工作中使用频率都比较高，Flutter很人性化，这些组件都提供好了，我们只需要了解一下如何使用就好了。下面是我用宝贵的周末时间做的一个Demo,请看效果。有什么好的建议，可以在下面留言交流一下，共同学习共同进步。

二、底部Tabbar

重新build方法会返回一个Scaffold组件，在这个组件下面添加底部导航属性bottomNavigationBar，onTap事件实现点击底部导航栏页面之间的切换和状态改变。因为界面有变化，所以这里使用的是动态组件StatefulWidget。

@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color.fromRGBO(244, 245, 245, 1.0), bottomNavigationBar: BottomNavigationBar( type:BottomNavigationBarType.fixed, currentIndex: currentIndex, items:_bottomTabs, onTap: (index){ setState(() { currentIndex = index; currentPage = _tabs[currentIndex];  }); }, fixedColor: Colors.green, ), body:currentPage ); }

_bottomTabs是定义的底部Tabbar的List，包含了Tabbar的每个item。item有默认icon和选择的activeIcon，这里使用的都是加载的本地图片，加载本地图片需要以下配置。

1、以当前Demo为例，建立一个assets文件夹images,下面建2.0x和3.0x两个文件夹，用来放2倍图和3倍图，另外直接在images文件夹下放一倍图。

2、需要在pubspec.yaml文件中声明每张图片。

3、Tabbar每个item的icon和activeIcon加载本地图。

final List _bottomTabs = [ BottomNavigationBarItem( icon:Image.asset("images/ic_tab_home_normal.png