Flutter - TabController监听index
简单一个小例子：
class _OrderPageState extends State<OrderPage>{
List _tabLabels = ["坚果", "前端"];
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Color.fromRGBO(26, 172, 255, 1),
title: TabBar(
isScrollable: true,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(style: BorderStyle.none)),
tabs: _tabLabels
),
),
body: Container(
color: Color.fromRGBO(26, 172, 255, 1),
child: TabBarView(
//TabBarView 默认支持手势滑动，若要禁止设置 NeverScrollableScrollPhysics
physics: NeverScrollableScrollPhysics(),
children: <Widget>[
Center(child:Text('坚果')),
Center(child:Text('前端"')),
],
),
),
)
}
TabBar与TabBarView通过index有一一对应关系，自定义一个 Controller：
class _GroupInfoState extends BaseState<GroupInfoNeWPage>
with SingleTickerProviderStateMixin{
TabController tabController;
@override
void initState() {
super.initState();
// 添加监听器
tabController = TabController(vsync: this, length: titleTabs.length)
..addListener(() {
switch (tabController.index) {
case 0:
print("坚果");
break;
case 1:
print("前端")
break;
}
});
}
//增加controller
title: TabBar(
controller: tabController,
)
child: TabBarView(
controller: tabController,
)
}
切换 tab 控制台都会打印相应的值，但有点击选项卡切换时打印了2次，似乎执行了两遍，滑动切换时正常输出一次。
原因大致是因为： 点击时 在动画过程先后触发了 notifyListeners()。看一下 TabController Class API,有以下属性:
//该动画值表示当前TabBar选中的指示器位置以及TabBar和TabBarView的scrollOffsets
animation → Animation<double>
//当前选中Tab的下标。改变index也会更新 previousIndex、设置animation's的value值、重置indexIsChanging为false并且通知监听器
index ↔ int
//true：当动画从上一个跳到下一个时
indexIsChanging → bool
//tabs的总数，通常大于1
length → int
//不同于animation's的value和index。offset value必须在-1.0和1.0之间
offset ↔ double
//上一个选中tab的index值，最初与index相同
previousIndex → int
那么我们可以加一层判断在监听器中:
tabController = TabController(vsync: this, length: titleTabs.length)
..addListener(() {
if(tabController.index.toDouble() == tabController.animation.value){
switch (tabController.index) {
case 0:
print("坚果");
break;
case 1:
print("前端")
break;
}
}
});
今天的分享到此就和大家说再见了，我是坚果，我会在平常分享一些我遇到的问题，以及解决问题时所采取的方案，欢迎大家关注
