颤振标签栏可滑动问题答案

【问题标题】：flutter tabbar swippable issue颤振标签栏可滑动问题
【发布时间】：2020-10-16 00:59:24
【问题描述】：

我是 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,
  ),
 });

【问题讨论】：

你实现了 onTap() 函数吗？你那里有代码吗
我还没有实现 onTap() 方法。真正发生的是点击标签栏标题添加 listener() 调用两次。但是滑动时只添加一次监听器调用。

标签： flutter swipe tabbar

【解决方案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);
        });
      });
     }

【讨论】：

感谢您的回复。给定的解决方案没有解决我的问题。

【解决方案2】：

使用 AutomaticKeepAliveClientMixin
覆盖 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);
}

【讨论】：