如何进行Flutter仿头条顶部tab切换实现-创新互联
这期内容当中小编将会给大家带来有关如何进行Flutter仿头条顶部tab切换实现,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
概述
今天主要实现一个仿头条顶部tab
切换实现,这种效果在项目中同样经常用到, 接下来我们就从头开始实现。
效果图
老规矩,开局先上效果图。
仿头条顶部tab切换实现
要实现这样的效果,需要使用TabBar
进行实现。我们先讲一下TabBar
的基本属性。
TabBar 和 TabBarView
TabBar
是属于AppBar
中的一个组件,通常和TabBarView
结合使用。
TabBar构造方法及常用属性简介
const TabBar({ Key key, @required this.tabs, this.controller, this.indicatorColor, this.labelColor, this.unselectedLabelColor, })
属性名 | 属性值类型 | 说明 |
---|---|---|
tabs | Tab类型的控件集合 | 要显示的所有tab子项 |
controller | TabController类型 | 主要用来监听tab的切换 |
indicatorColor | Color | tab子项指示器的颜色 |
labelColor | Color | 子项文字的颜色 |
unselectedLabelColor | Color | 未选中子项文字的颜色 |
TabBarView构造方法及常用属性简介
const TabBarView({ Key key, @required this.children, this.controller, })
属性名 | 属性值类型 | 说明 |
---|---|---|
children | Widget的集合 | 对应TabBar每个子项要显示的具体内容 |
controller | TabController类型 | 主要用来监听tab的切换 |
简单使用
接下来我们将使用两种方式实现基本使用,第一种方式是配合DefaultTabController
使用,另外一种是配合 TabController
使用。在我们使用TabBar
的时候必须放在Scaffold
控件的AppBar
中,如果我们的App
中Scaffold
无法修改, 那我们需要在想要实现tab效果的页面上包裹一层Scaffold
组件,要使用TabBar组件,必须为其指定TabController,要不然 会报错,我们先看第一种实现方式,在Scaffold
组件外面包裹DefaultTabController
实现。
DefaultTabController实现
首先,我们先准备需要切换的tab
子项的集合和对应tab
子项的具体显示内容。
// 需要显示的tab子项集合 final tabs =[ Tab( text: "热门", ), Tab( text: "新闻", ), ]; // 对应上述tab切换后具体需要显示的页面内容 final tabBarViews = [ Center( child: Text("热门Tab对应的界面"), ), Center( child: Text("新闻Tab对应的界面"), ), ];
然后再HomePage
页面定义一个TabBar
实现。
DefaultTabController( length: tabs.length, // tab的个数 child: Scaffold( appBar: AppBar( title: TabBar( tabs: tabs, ), ), body: TabBarView( children: tabBarViews, ), ), );
正常情况下,我们的TabBar
应该是对应appBar
中的bottom
属性的,但此处我们卸载了title
属性下,是因为我们上层已经 有了一个appBar
了,如果再把TabBar
对应的写在appBar的bottom
属性上,就会导致appBar
留有一个空白非常难看,效果如下。 所以我们定义在了title
属性上。
TabController实现
上述实现方式有个局限,就是我们点击切换tab
的时候,往往需要监听同时更改页面状态。所以我们以TabController
实现。 首先先看一下TabController
的构造方法及属性。
TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync });
属性名 | 属性值类型 | 说明 |
---|---|---|
initialIndex | int | 初始选择的tab下标 |
length | int | tab的个数 |
vsync | TickerProvider | 提供动画等行为 |
要实现能动态改变状态的tab
切换效果必须先继承StatefulWidget
,因为TabController
需要TickerProvider
,所以我们同时 让我们state
类Mixins SingleTickerProviderStateMixin
这个类。从而更容易的实现TabController
,看一下具体的代码实现。
class ThirdPage extends StatefulWidget { @override State createState() => _ThirdPageState(); } class _ThirdPageState extends Statewith SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: tabs.length, vsync: this); _tabController.addListener(() => print("当前点击的是第${_tabController.index}个tab")); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: TabBar( controller: _tabController, tabs: tabs, ), ), body: TabBarView( controller: _tabController, children: tabBarViews, ), ); } }
至此,我们的仿头条tab
切换效果已经实现了。
上述就是小编为大家分享的如何进行Flutter仿头条顶部tab切换实现了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联-成都网站建设公司行业资讯频道。
网站名称:如何进行Flutter仿头条顶部tab切换实现-创新互联
文章URL:http://pwwzsj.com/article/dciioo.html