如何检测到 TabBarView 刚刚被拖动？答案

【问题标题】：How can I detect that a TabBarView has just been dragged?如何检测到 TabBarView 刚刚被拖动？
【发布时间】：2019-09-08 13:36:11
【问题描述】：

TabBar 小部件有一个 onTap() 回调，允许检测用户何时刚刚按下了一个选项卡。这很有用，我们可以准备新的 tabView 来显示一些动态数据。

TabBar 小部件还具有允许更改显示的 tabView 的拖动功能（类似于点击另一个选项卡的结果）。但在这种情况下，似乎没有办法准备新的 TabView，因为没有 onDrag() 回调。

所以问题是：有没有办法检测到 TabBarView 刚刚被拖动？

【问题讨论】：

标签： dart flutter

【解决方案1】：

这对我有用：

int _tab = 0;

@override
void initState() {
 super.initState();

 _tabController = TabController(
  length: _tabs.length, 
  vsync: this
 );

 _tabController.animation!.addListener(_tabListener);
}

void _tabListener(){
 if(_tab != _tabController.animation!.value.round()){
  setState(() {
   _tab = _tabController.animation!.value.round();
  });
 }
}

【讨论】：

【解决方案2】：

就我而言；在我将其设置为 TabView 控制器之前，tab 拖动更改无法使用 tabcontroller 处理。

这样处理；

void _handleTabSelection() {
    if (_tabController.indexIsChanging || _tabController.index != _tabController.previousIndex) {
      setState(() {
        _selectedTab = _tabController.index;
      });
    }
  }

并设置它；

TabBarView(
   controller: _tabController,
   ...



TabBar(
      controller: _tabController,
    ...

【讨论】：

【解决方案3】：

这是我的解决方案；

 if (_tabController.indexIsChanging || 
    (_tabController.animation.value == _tabController.index)) {
  print(_tabController.index);

  Provider.of<OrderScreenProvider>(context, listen: false).onIndexChangeResetAccountInfo();
}

【讨论】：

【解决方案4】：

以前的答案仅在用户完成拖动时考虑。

如果您需要监听更准确的数据（即用户刚刚开始拖动），您可以监听动画：

_tabController.animation.addListener(() => print(_tabController.animation.value.toString));

【讨论】：

【解决方案5】：

我发现这个解决方案可以区分点击新标签和滑动到新标签事件。

它看起来很尴尬，但它正在工作。遗憾的是无法检测到滑动的开始。

@override
  void initState() {
    print("FB:X _HNPageState:initState()");
    _tabController = TabController(vsync: this, length: _myTabs.length);
    _tabController.addListener(() {
      if (_tabController.indexIsChanging)
        // Tab Changed tapping on new tab
       onTabTap();
      else if(_tabController.index != _tabController.previousIndex)
        // Tab Changed swiping to a new tab
        onTabDrag();
    });
    super.initState();
  }

【讨论】：

【解决方案6】：

您可以使用TabController 并添加一个监听器来观察变化。它适用于点击和拖动事件/动作。

你可以这样做：

_tabController.addListener(() {
    print("${_tabController.index}");
});

【讨论】：

检测标签点击和滑动。我需要区分它们
点击或拖动时真的需要做出不同的动作吗？
如果您需要禁用其中一个选项卡，请注意this bug
我需要区别对待它们，因为拖动会在 _tabController 上生成 2 个事件（一个用于拖动开始，另一个用于拖动结束）。在我的事件处理程序中，我需要加载（仅一次）新 tabView 的元素。顺便说一句，您已将第二个处理程序重命名为 onTabDrag，因为它实际上做了不同的事情