GestureDetector在TabBarView上不起作用 [英] GestureDetector is not working on top of TabBarView

问题描述

我想检测TabBarView上的手势，因此我将TabBarView包裹在GestureDetector小部件中，但是它不注册任何手势.滑动到不同的标签即可.我只想检测手势.

I want to detect the gestures on the TabBarView so I wrapped the TabBarView in a GestureDetector widget, but it doesn't register any kind of gesture. And swiping to different tabs works. I just want a detect the gestures.

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)),
        ]),
      ),


    );
  }

推荐答案

嵌套手势小部件

出现此问题的原因是，这两个小部件都接受触摸输入，而当您有两个小部件都接受触摸输入时，长话短说，孩子赢得了这场战斗.这是长话.因此，您来自TabBarView和GestureDetector的所有输入都被发送到GestureArena.那里的竞技场考虑了多个不同的因素，但故事的结局是孩子总是赢家.您可以通过使用自己的GestureFactory定义自己的RawGestureDetector来解决此问题，这将改变竞技场的表演方式.

The reason you are having this issue is that both of those widgets receive touch input and when you have two widgets that receive touch input, long story short the child wins that battle. Here is the long story. So both of your inputs from your TabBarView and GestureDetector are sent to what is called a GestureArena. There the arena takes into account multiple different factors but the end of the story is the child always wins. You can fix this issue by defining your own RawGestureDetector with its own GestureFactory which will change the way the arena performs.

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);
  }
}

我要感谢纳什(Nash)的作者，扑通扑通潜水:手势这是一篇很棒的文章，我强烈建议您查看一下.

I want to give all credit to Nash the author of Flutter Deep Dive: Gestures this is a great article I highly recommend you check it out.

这篇关于GestureDetector在TabBarView上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！