Question

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

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

这意味着我需要：

1）获取相对于CustomPainter小部件的分接位置的方法

2）获取CustomPainter小部件的绝对位置的方法

我无法找到可以提供其中任何一种的API。这样的API是否存在？

背景：https://github.com/dgp1130/thermo/blob/master/lib/widgets/temp_picker.dart

目前的方式，旋转温控器工作，但＆＃34;中心＆＃34;由于应用栏的高度，触摸实际上大约在真实中心的一半。

由于

Answer 1

您可以使用RenderBox.globalToLocal方法将全局坐标转换为本地坐标。要获得RenderBox，您可以在findRenderObject上致电BuildContext。

--- 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窗口小部件的大小发生变化时，它可能会出现意外行为。我建议您在_tapPos中计算并保存getAngleFromPosition的结果，并将该角度值传递给onPanUpdate构造函数，而不是在_TempPainter中存储本地偏移量。这样，只要用户当前没有触摸屏幕，当屏幕尺寸改变时，角度将保持不变。

获取相对于小工具的点击位置

1 个答案: