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

【问题标题】：When drag the GestureDetector in vertical direction in the ListView, can not trigger the GestureDetector onPanUpdate event在 ListView 中垂直方向拖动 GestureDetector 时，无法触发 GestureDetector onPanUpdate 事件
【发布时间】：2020-02-16 06:47:43
【问题描述】：

在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(() {});
        },
      ),
    );
  }
}

【问题讨论】：

标签： events flutter dart

【解决方案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);
  }
}

【讨论】：