Flutter中如何获取GestureDetector的x轴和y轴坐标

Question

目前，我正在构建一个 Pinterest 克隆应用程序，我真的需要您的帮助。实际上，我花了将近一个小时寻找答案，但给出的解决方案都不起作用。所以我需要的只是确定用户通过手势检测器按下的位置的 x 轴和 y 轴。谁能帮帮我，拜托...

Answer 1

我相信您不应该在这里使用 GestureDetector ，而是使用 Listener 小部件。作为侦听器，您可以为您提供用户按下位置的全局位置，或按下小部件开始位置的相对位置。

这是一些示例代码：

import 'package:flutter/material.dart';

class GetPositionExample extends StatelessWidget {
  const GetPositionExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Listener(

      // This will report a PointerDownEvent whenever the user presses the screen.
      // If you want updates as the user moves their finger across the screen,
      // use onPointerMove instead.
      onPointerDown: (PointerDownEvent event) {
        // Global screen position.
        print("Global position x:${event.position.dx}, y:${event.position.dy}");
        // Position relative to where this widget starts.
        print("Relative position: x:${event.localPosition.dx}, y:${event.localPosition.dy}");
      },

      // You should also be aware of these Listener methods,
      // if any of them is more suited for your use-case:

      // onPointerMove: (PointerMoveEvent event) {},
      // onPointerUp: (PointerUpEvent event) {},
      // onPointerCancel: (PointerCancelEvent event) {},
      // onPointerHover: (PointerHoverEvent event) {},
      // onPointerSignal: (PointerSignalEvent event) {},

      child: Container(
        color: Colors.blue,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height/2,
      ),
    );
  }
}

// Some code to run the above example
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: const [
        GetPositionExample(),
      ],
    )));
  }
}

void main() => runApp(const App());

Answer 2

你的问题不清楚。 确定手势检测器的 x 和 y 轴是什么意思

如果您需要知道用户是否向右、向左或向下滑动，这里是一个示例

  GestureDetector(
          onVerticalDragUpdate: (details) {
    int sensitivity = 8;
            if (details.delta.dy > sensitivity) {
              // Down Swipe
              
            } else if (details.delta.dy < -sensitivity) {
              // Up Swipe
             
            }
          },
          onHorizontalDragUpdate: (details) {
            // Note: Sensitivity is integer used when you don't want to mess up vertical drag
            int sensitivity = 8;
            if (details.delta.dx > sensitivity) {
              // Right Swipe
             
            } else if (details.delta.dx < -sensitivity) {
             
              //Left Swipe
            }
          },

Answer 3

您可以根据需要使用 rect_getter 。并实现如下：

    var globalKey = RectGetter.createGlobalKey();
  Offset _tapPosition;
  var dx;   //for x-axis
  var dy;   //for y-axis

RectGetter(
              key: globalKey,
              child: new Expanded(
                child: new InkWell(
                  onTap:  _handleTapDown,
                  onTapDown: _handleTapDown,
                  child: Center(
                    child: Container(
                      child: Utility.imageFromBase64String(imagename),
                      //  backgroundColor: const Color(0xFF20283e),
                    ),
                  ),
                ),
              ),
            ),

_handleTapDown函数

void _handleTapDown(TapDownDetails details) {
final RenderBox referenceBox = context.findRenderObject();
setState(() {
  _tapPosition = referenceBox.globalToLocal(details.globalPosition);
  dx = double.parse(_tapPosition.dx.toStringAsFixed(2));
  dy = double.parse(_tapPosition.dy.toStringAsFixed(2));
  print(_tapPosition);
 
});
}