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

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

您可以使用该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我建议您计算并保存getAngleFromPositionin 的结果onPanUpdate并将该角度值传递给_TempPainter构造函数,而不是存储本地偏移量.这样,只要用户当前没有触摸屏幕,当屏幕尺寸改变时,角度将保持不变.