首页 > 其他 > 详细

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

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

实现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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!