13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab

实现tab,可以点击切换
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第1张图片
首先来实现一个tab框架。首先创建travel_page
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第2张图片
定义成员变量,用到TabView,所以需要先定义TabController。然后定义本页的数据TravelModel
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第3张图片
默认为空数组

还有TravelTabModel
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第4张图片
在initState内请求接口数据
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第5张图片
这个this我们需要一个TickerProvider
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第6张图片

这里我们让他实现SingleTickerProviderStateMinxin就可以了。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第7张图片
名称修改下,修改为TravelDao
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第8张图片
这里返回类型修改为TravelTabModel。并导入这个包
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第9张图片

13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第10张图片

获取到接口的数据,并赋值给变量,实现内容的渲染

13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第11张图片
报错的处理。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第12张图片

build内实现tab功能

首先页面是上下结构的,自外层放一个column
实现Tabbar的组件之类用tabbar
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第13张图片
tabBar接收一个Controller。可以把我们当前的_controller传递过去。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第14张图片
使tabBar可以左右滑动
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第15张图片
设置指示器
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第16张图片
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第17张图片
设置浅入量
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第18张图片
设置tabs
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第19张图片
tabs属性接收的是一个数组
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第20张图片
这里直接调用toList就可以了
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第21张图片

运行测试
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第22张图片

彩蛋

如果TabBar是静态的。在tabs这个属性里面写死的数据就没事,
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第23张图片
如果tabs是根据网路请求之后, 动态的渲染的就是出现这种空白的bug
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第24张图片
节后获取到数据之后需要重新初始化controller
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第25张图片
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第26张图片
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第27张图片

这样我们的tab数据就加载完成了。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第28张图片
底部的内容
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第29张图片
加完这一块,整个页面又是空白
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第30张图片
这是一个渲染的异常。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第31张图片
没有指定高度,所以发生渲染的异常。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第32张图片

13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第33张图片
帮我们适配撑开内容。适配水平方向上的没有撑开的内容。外层我们用它包裹一下。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第34张图片
这样就解决了渲染过程中,丢失宽度和高度的问题。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第35张图片

禁止PageView的滑动

首页左右滑动效果禁用,和旅拍的tab通过手指左右滑动的问题。
13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第36张图片

13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab_第37张图片

结束

 

你可能感兴趣的:(13-3使用TabBar+TabBarView 实现旅拍可滑动切换多Tab)