Flutter_NavigationBar和Tabview共同实现

Flutter_NavigationBar和Tabview共同实现

一.TabBar和TabView基本实现

①因为TabBar是动态组件所以使用了，一般静态推荐StatelessWidget.

②记得，源码我没看过，只知道具体实现，不写后面TabCootroller拿不到vsync。

③必须实现Controller，否则会报错，一个是TabBar()里面的Controller,还有配套TabBarView()里面的Controller必须是同一个。

需要实现

initialIndex：初始位置就是停留在那个页面，这里我写了0，就是停留第一个页面。如下

然后页面里面可以自定义组件添加一些其他的东西，这里我只用了一个Text()组件，然后页面是可以手滑和点击的，自带了很好的动画效果。

二.Tabbar()和TabBarView()基本参数介绍

 

Tabbar()都是按照indicator和lable进行设置鼠标悬停到上面一看就会，过于简单就不一一介绍了indicator是lable下面的白线参数自己可以调试。

三.实现NavigationBar()导航栏几行代码就搞定.

前面TabBar()和TabBarview()的页面实现4个复制粘贴就好，写一个list()和index 为了后面加载其他页面，初始化状态，把页面添加到List()里面

记得写super.initState();

然后BoootmNavigationBar()，需要实现几根基本的东西，

，高亮显示选中的目标，不写这个会失去动画效果。

,ontap,点击时候刷新，并且setstate刷新页面把点击的index传入到数组里面去，与body中对应，这样你点击的页面就会刷新跳转了

这里我选了几个常用的属性作为代表，分别是图标，图标下面文字还有背景颜色，

下面是实现后的效果这样我们就得到了3X4，十二个页面可以供你发挥了，BottomNavigationItem()中使用不同的颜色可以得到很酷的动画效果。

这样就基本实现了

2020 7/5更新

今天在写界面的过程中遇到一个Tabbar（）组件的一个问题，Tabbar（）中的指示器需要修成圆角如图

flutter TapBar自定义indicator、固定宽度、圆角、改变indicator和text的距离。

这个问题特别好解决，进入UnderlineTabIndicator()组件，

滑倒最下方修改

将他的源码改成StrokeCap.round;即可实现。

flutter TapBar自定义indicator、固定宽度、圆角、改变indicator和text的距离参考下面的大佬的博客。

https://blog.youkuaiyun.com/pengbo6665631/article/details/103645037；