赞
踩
微信公众号:[程序员指北]
关注可了解更多的教程。问题或建议,请公众号留言;
上篇我们讲了实现一个仿闲鱼底部导航栏的功能,今天主要实现一个仿头条顶部tab切换实现,这种效果在项目中同样经常用到,
接下来我们就从头开始实现。
老规矩,开局先上效果图。
要实现这样的效果,需要使用TabBar进行实现。我们先讲一下TabBar的基本属性。
TabBar是属于AppBar中的一个组件,通常和TabBarView结合使用。
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 | 未选中子项文字的颜色 |
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实现。
首先,我们先准备需要切换的tab子项的集合和对应tab子项的具体显示内容。
// 需要显示的tab子项集合
final tabs = <Tab>[
Tab(
text: "热门",
),
Tab(
text: "新闻",
),
];
// 对应上述tab切换后具体需要显示的页面内容
final tabBarViews = <Widget>[
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属性上。
上述实现方式有个局限,就是我们点击切换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<ThirdPage>
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,你懂的。。。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。