颤振标签栏可滑动问题

Question

我是 Flutter 的新手，我通过添加动态内容创建了选项卡栏和选项卡栏视图，如以下代码所示。 当单击选项卡栏中的选项卡时，它工作正常。 但是滑动标签栏视图新值总是在另一个滑动时检测到，例如移动到选项卡一个选项卡栏视图显示 0。 移动到选项卡 2 选项卡栏视图显示 1。

请帮助我的朋友。

@override
void initState() {
super.initState();
setState(() {
_isLoading = true;
num = 0;
for(int i=0;i<3;i++){
_tabs.add(Tab(text: '${i + 1}'));
tabView.add(getWidget());
}
_tabController = TabController(vsync: this, length: _tabs.length, initialIndex: 0);   
_tabController.addListener((){
print('index${_tabController.index}');
setState(() {
num = _tabController.index ;  
});
});

Widget getWidget(){
return Builder(builder: (BuildContext context) {
return Text('${num}');
});
}
@override
Widget build(BuildContext context) {
return 
DefaultTabController(
length: _tabs.length,
child:Scaffold(
appBar: AppBar(
title: Text("cart"),
bottom: TabBar(
controller: _tabController,
tabs: _tabs,
),
),   
body: TabBarView(
controller: _tabController,
children:tabView,
),
});

Answer 1

1. use AutomaticKeepAliveClientMixin
2. 重写 wantKeepAlive 属性并返回 true

取而代之的是：

tabView.add(getWidget());

用：

tabView.add(Tabpageview(TabData(i)));
class Tabpageview extends StatefulWidget {
final tabData;
Tabpageview(this.tabData);
@override
_TabpageviewState createState() => _TabpageviewState();
}
class _TabpageviewState extends State<Tabpageview>
with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return Tab(child: Center(child: Text('Tab : ${widget.tabData.data}')));
}
}
class TabData {
int data;
TabData(this.data);
}

Answer 2

用一些流畅的动画修改你的代码，请根据需要修改setState((方法。

final aniValue = _tabController.animation.value;
if (aniValue > 0.5 && index != 1) {
products.forEach((item) {
setState(() {
displayProducts.add(item);
});
});
} else if (aniValue <= 0.5 && index != 0) {
products.forEach((item) {
setState(() {
displayProducts.add(item);
});
});
}