GestureDetector 在 TabBarView 上不起作用

Question

我想检测 TabBarView 上的手势，因此我将 TabBarView 包装在 GestureDetector 小部件中，但它没有注册任何类型的手势。并且滑动到不同的标签有效。我只想检测手势。

TabController _tabController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//I have 3 tabs in here at AppBar.bottum),

///This is where I need help with the GestureDetector not working.

      body: GestureDetector(
        onHorizontalDragStart: (DragStartDetails details) {
          print('Start : ');
          print(details);
        },
        child: TabBarView(controller: _tabController, children: <Widget>[
          Tab(icon: Icon(Icons.category)),
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.star)),
        ]),
      ),


    );
  }

Answer 1

嵌套手势小部件

您遇到此问题的原因是这两个小部件都接收触摸输入，并且当您有两个小部件接收触摸输入时，长话短说孩子赢得了这场战斗。这是长篇大论。因此，来自TabBarView 和GestureDetector 的输入都发送到所谓的GestureArena。那里的竞技场考虑了多种不同的因素，但故事的结局是孩子总是赢。您可以通过使用自己的GestureFactory 定义自己的RawGestureDetector 来解决此问题，这将改变竞技场的执行方式。

RawGestureDetector(
      gestures: {
        AllowMultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<
            AllowMultipleGestureRecognizer>(
          () => AllowMultipleGestureRecognizer(),
          (AllowMultipleGestureRecognizer instance) {
            instance.onTap = () => print('Episode 4 is best! (parent container) ');
          },
        )
      },
      behavior: HitTestBehavior.opaque,
      //Parent Container
      child: Container(
        color: Colors.blueAccent,
        child: Center(
          //Wraps the second container in RawGestureDetector
          child: RawGestureDetector(
            gestures: {
              AllowMultipleGestureRecognizer:
                  GestureRecognizerFactoryWithHandlers<
                      AllowMultipleGestureRecognizer>(
                () => AllowMultipleGestureRecognizer(),  //constructor
                (AllowMultipleGestureRecognizer instance) {  //initializer
                  instance.onTap = () => print('Episode 8 is best! (nested container)');
                },
              )
            },
            //Creates the nested container within the first.
            child: Container(
               color: Colors.yellowAccent,
               width: 300.0,
               height: 400.0,
            ),
          ),
        ),
      ),
    );


class AllowMultipleGestureRecognizer extends TapGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

我想将所有功劳归功于 Flutter Deep Dive: Gestures 的作者 Nash，这是一篇很棒的文章，我强烈建议您查看。

Answer 2

改变GestureDetector的行为

当您尝试使用 Stack 和 GestureDetector 时，会发生相同类型的问题。解决这个问题的简单方法是更改​​GestureDetector的behavior。

TabController _tabController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(//I have 3 tabs in here at AppBar.bottum),

      body: GestureDetector(

        // Add This Line in Code.
        behavior: HitTestBehavior.translucent,

        onHorizontalDragStart: (DragStartDetails details) {
          print('Start : ');
          print(details);
        },
        child: TabBarView(controller: _tabController, children: <Widget>[
          Tab(icon: Icon(Icons.category)),
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.star)),
        ],
       ),
      ),
    );
  }

我找到了这个表格How to make a GestureDetector capture taps inside a Stack?。

请告诉我们这是否适合您。就我而言，对于Stack 和TabBarView，我直接在两个小部件的子级上使用了它，您可能需要将GestureDetector 的behavior 更改为其他内容或在@987654332 的子级上使用它@。