如何解决Flutter 中的标签栏:如何在切换标签时执行功能?
我遇到了标签栏的问题。实际上,我的应用程序中有四个选项卡(即四个类别)。有一个单一的 bloc 根据类别 id 从存储库中获取数据。所以我添加了一个 _tabController.addListener(_onTabChanged);
属性,并根据当前选项卡(即当前类别)调用 bloc 事件。但问题是 addListener 在到达该选项卡时执行该行,而不是在通过前一个到下一个进行动画处理时执行该行。因此,这会在下一个选项卡上显示前一个选项卡的内容,然后重新加载其所需的内容,这非常烦人。所以我的问题是,有没有一种方法可以在动画期间从一个选项卡到另一个选项卡请求具有所需类别 ID 的块,而不是到达那里??
代码如下:
class CategoryTab extends StatefulWidget {
final List<Category> categories;
const CategoryTab({Key key,this.categories}) : super(key: key);
@override
_CategoryTabState createState() => _CategoryTabState();
}
class _CategoryTabState extends State<CategoryTab>
with SingleTickerProviderStateMixin {
TabController _tabController;
int activeTab;
@override
void initState() {
super.initState();
activeTab = 0;
_tabController = TabController(
vsync: this,length: widget.categories.length,initialIndex: activeTab);
_tabController.addListener(_onTabChanged);
context.read<SoundBloc>().add(GetSounds(categoryId: '1'));
print(_tabController.index);
}
void _onTabChanged() {
if (!_tabController.indexIsChanging && activeTab != _tabController.index) {
activeTab = _tabController.index;
context
.read<SoundBloc>()
.add(GetSounds(categoryId: (activeTab + 1).toString()));
}
}
@override
void dispose() {
_tabController.removeListener(_onTabChanged);
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text(
'Sounds',style: Theme.of(context).textTheme.headline5,),bottom: TabBar(
controller: _tabController,isScrollable: true,indicator: CustomTabIndicator(),physics: BouncingScrollPhysics(),unselectedLabelColor: Colors.redAccent,indicatorSize: TabBarIndicatorSize.tab,tabs: widget.categories
.map((category) => CatgoryTabItemWidget(category: category))
.toList(),body: TabBarView(
controller: _tabController,children: widget.categories
.map((category) => SoundView(
category: category,))
.toList(),);
}
}
注释类别 id 从 1 开始,即 1、2、3、4(4 个类别)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。