成都创新互联服务项目包括城区网站建设、
城区网站制作、城区网页制作以及城区网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，
城区网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到城区省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
这期内容当中小编将会给大家带来有关如何进行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 State with 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切换实现-创新互联
转载注明：
http://cdkjz.cn/article/dciioo.html
