码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-15 13:48:51      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:bar   底部   数据   single   渲染   首页   ini   运行   tab   

实现tab,可以点击切换
技术图片
首先来实现一个tab框架。首先创建travel_page
技术图片
定义成员变量,用到TabView,所以需要先定义TabController。然后定义本页的数据TravelModel
技术图片
默认为空数组
技术图片
还有TravelTabModel
技术图片
在initState内请求接口数据
技术图片
这个this我们需要一个TickerProvider
技术图片

这里我们让他实现SingleTickerProviderStateMinxin就可以了。
技术图片
名称修改下,修改为TravelDao
技术图片
这里返回类型修改为TravelTabModel。并导入这个包
技术图片

技术图片

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

技术图片
报错的处理。
技术图片

build内实现tab功能

首先页面是上下结构的,自外层放一个column
实现Tabbar的组件之类用tabbar
技术图片
tabBar接收一个Controller。可以把我们当前的_controller传递过去。
技术图片
使tabBar可以左右滑动
技术图片
设置指示器
技术图片
技术图片
设置浅入量
技术图片
设置tabs
技术图片
tabs属性接收的是一个数组
技术图片
这里直接调用toList就可以了
技术图片

运行测试
技术图片

彩蛋

如果TabBar是静态的。在tabs这个属性里面写死的数据就没事,
技术图片
如果tabs是根据网路请求之后, 动态的渲染的就是出现这种空白的bug
技术图片
节后获取到数据之后需要重新初始化controller
技术图片
技术图片
技术图片

这样我们的tab数据就加载完成了。
技术图片
底部的内容
技术图片
加完这一块,整个页面又是空白
技术图片
这是一个渲染的异常。
技术图片
没有指定高度,所以发生渲染的异常。
技术图片

技术图片
帮我们适配撑开内容。适配水平方向上的没有撑开的内容。外层我们用它包裹一下。
技术图片
这样就解决了渲染过程中,丢失宽度和高度的问题。
技术图片

禁止PageView的滑动

首页左右滑动效果禁用,和旅拍的tab通过手指左右滑动的问题。
技术图片

技术图片

结束

 

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

标签:bar   底部   数据   single   渲染   首页   ini   运行   tab   

原文地址:https://www.cnblogs.com/wangjunwei/p/12311199.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!