GestureDetector is not working on top of TabBarView

问题

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


    );
  }

回答1:

Nested Gesture Widgets

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

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.

来源：https://stackoverflow.com/questions/61221798/gesturedetector-is-not-working-on-top-of-tabbarview

标签

Flutter

flutter-layout