events - 在ListView中垂直方向拖动GestureDetector时，无法触发GestureDetector onPanUpdate事件

Question

在ListView中垂直拖动GestureDetector时，无法触发GestureDetector的onPanUpdate事件。

I made a gif .

GestureDetector onPanUpdate 事件只能通过水平方向拖动来触发。

我知道Flutter有GestureArenaManager，但是如何让GestureDetector在竞技场中获胜？

我想在拖动GestureDetector时，可以

代码是这样的。

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'hi',
      home: DemoWidget(),
    ));

class DemoWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GestureDetector in ListView')),
      body: ListView(children: <Widget>[
        Card(
          child: Container(
            height: 500,
            child: Stack(
              children: <Widget>[
                Drag(),
              ],
            ),
          ),
        ),
        Card(
          child: Container(
            height: 1000,
          ),
        ),
      ]),
    );
  }
}

class Drag extends StatefulWidget {
  @override
  DragState createState() => DragState();
}

class DragState extends State<Drag> {
  double x = 0, y = 0;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: x,
      top: y,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        dragStartBehavior: DragStartBehavior.down,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.lightBlue,
          child: Icon(
            Icons.games,
            color: Colors.white,
            size: 30,
          ),
        ),
        onPanUpdate: (details) {
          x += details.delta.dx;
          y += details.delta.dy;
          setState(() {});
        },
      ),
    );
  }
}

Answer 1

看看这个:Receive “onVerticalDragUpdate” on nested “GestureDetectors” in Flutter

在您的情况下，您还可以进行水平拖动，因此您可以执行以下操作:

class DragState extends State<Drag> {
  double x = 0, y = 0;

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: x,
      top: y,
      child: RawGestureDetector(
        gestures: {
          AllowMultipleHorizontalDragGestureRecognizer:
          GestureRecognizerFactoryWithHandlers<
              AllowMultipleHorizontalDragGestureRecognizer>(
                () => AllowMultipleHorizontalDragGestureRecognizer(),
                (AllowMultipleHorizontalDragGestureRecognizer instance) {
              instance
                ..onUpdate = (details) {
                  x += details.delta.dx;
                  setState(() {});
                };
            },
          )
        },
        child: RawGestureDetector(
          gestures: {
            AllowMultipleVerticalDragGestureRecognizer:
            GestureRecognizerFactoryWithHandlers<
                AllowMultipleVerticalDragGestureRecognizer>(
                  () => AllowMultipleVerticalDragGestureRecognizer(),
                  (AllowMultipleVerticalDragGestureRecognizer instance) {
                instance
                  ..onUpdate = (details) {
                    y += details.delta.dy;
                    setState(() {});
                  };
              },
            )
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.lightBlue,
            child: Icon(
              Icons.games,
              color: Colors.white,
              size: 30,
            ),
          ),
        ),
      ),
    );
  }
}

class AllowMultipleVerticalDragGestureRecognizer extends VerticalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}

class AllowMultipleHorizontalDragGestureRecognizer extends HorizontalDragGestureRecognizer {
  @override
  void rejectGesture(int pointer) {
    acceptGesture(pointer);
  }
}