Flutter中TabBar 如何判断当期选中的哪个tab呢?
在Flutter中,你可以使用TabController
来管理TabBar
中的选项卡状态,包括判断当前选中的是哪个Tab。TabController
提供了index
属性来获取当前选中的Tab索引,同时还有一个animation
属性,它是一个Animation<double>
,其值在每个Tab之间切换时会发生改变。
以下是如何使用TabController
来管理TabBar
和判断当前选中的Tab的示例。
首先,你需要声明一个TabController
:
class MyTabbedPage extends StatefulWidget {
@override
_MyTabbedPageState createState() => _MyTabbedPageState();
}
class _MyTabbedPageState extends State<MyTabbedPage>
with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 3); // 'length' 是Tab的数量
_tabController.addListener(_handleTabIndex);
}
@override
void dispose() {
_tabController.removeListener(_handleTabIndex);
_tabController.dispose();
super.dispose();
}
void _handleTabIndex() {
setState(() {}); // 变更状态后刷新UI
// 当前选中的Tab索引是 _tabController.index
print('Current Index: ${_tabController.index}');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBar Demo'),
bottom: TabBar(
controller: _tabController,
tabs: [
// 为TabBar定义tabs
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
// 对应每个Tab的内容
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
);
}
}
在这个例子中,_MyTabbedPageState
使用SingleTickerProviderStateMixin
,它用于为TabController
提供vsync
参数,它是一个TickerProvider
,可以将动画与屏幕的刷新率同步。我们创建了一个TabController
实例,并通过addListener
方法添加了一个监听函数_handleTabIndex
,每次Tab改变时都会被调用。
在_handleTabIndex
函数里,我们调用setState
以触发UI的更新,并且可以使用_tabController.index
获取当前选中的Tab索引。
重要的是在dispose
方法中,要调用removeListener
来移除添加的监听器,然后调用dispose
来销毁TabController
的实例,以避免内存泄漏。
一个更简单的方式获得当前选中的Tab索引是直接通过_tabController.index
,但常见的做法是使用监听器,这样可以一旦Tab变化就立即做出响应。
使用这种方法时,你可以轻松地判断出当前选中了TabBar中的哪个Tab并进行适当的响应,从而实现复杂的用户界面逻辑。
转载自:https://juejin.cn/post/7346763303429750793