颤振标签栏可滑动问题

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

用一些流畅的动画修改你的代码，请根据你的需要修改 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);
        });
      });
     }

Answer 2

使用 AutomaticKeepAliveClientMixin
覆盖 wantKeepAlive 属性和 return 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);
}

颤振标签栏可滑动问题

flutter tabbar swippable issue

tabbar

swipe

flutter