获取相对于小部件的点击位置

Question

我正在尝试制作一个 Flutter 小部件来设置温度，看起来像恒温器旋钮。我已经扩展了 CustomPainter 以在屏幕上实际绘制它，现在我正在尝试设置抓取功能，以便用户可以旋转它。

当用户触摸屏幕时，我可以使用 GestureDetector 小部件获取回调，但我需要知道它相对于旋钮中心的位置。不幸的是，GestureDetector 提供的位置是绝对坐标，而画布相对于小部件的原点工作。有没有办法可以将这些坐标中的一个转换为另一个？

这意味着我需要：

1) 一种获取相对于 CustomPainter 小部件的点击位置的方法

2) 一种获取 CustomPainter 小部件绝对位置的方法

我找不到可以提供其中任何一种的 API。有这样的API吗？

上下文：https://github.com/dgp1130/thermo/blob/master/lib/widgets/temp_picker.dart

目前的方式是，旋转恒温器可以工作，但由于应用栏的高度，触摸的“中心”实际上是在实际中心上方的一半左右。

谢谢

Answer 1

你可以使用 TapDownDetails 的 localposition 属性如下：

GestureDetector(
  onTapDown: (details) {
       //local position
       print(details.localPosition);
       //global position 
       print(details.globalPosition);
  },
),

Answer 2

您可以使用RenderBox.globalToLocal 方法将全局坐标转换为局部坐标。要获取RenderBox，您可以拨打findRenderObjectBuildContext。

--- a/lib/widgets/temp_picker.dart
+++ b/lib/widgets/temp_picker.dart
@@ -41,7 +41,12 @@ class _TempPickerState extends State<TempPicker> {
     return new Container(
       constraints: new BoxConstraints.expand(),
       child: new GestureDetector(
-        onPanUpdate: (details) => setState(() => _tapPos = details.globalPosition),
+        onPanUpdate: (details) {
+          setState(() {
+            RenderBox box = context.findRenderObject();
+            _tapPos = box.globalToLocal(details.globalPosition);
+          });
+        },
         child: new CustomPaint(
           painter: new _TempPainter(
             minValue: widget.minValue,

但这并不完全正确，因为当设备旋转并且TempPicker 小部件的大小发生变化时，它可能会出现意外行为。我建议您计算并将getAngleFromPosition 的结果保存在onPanUpdate 中，并将该角度值传递给_TempPainter 构造函数，而不是将本地偏移量存储在_tapPos 中。这样，当屏幕尺寸发生变化时，只要用户当前没有触摸屏幕，角度就会保持不变。