获取相对于小部件的分接位置 [英] Get Tap Position Relative to Widget

问题描述

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

I'm trying to make a Flutter widget to set a temperature, meant to look like a thermostat knob. I've extended CustomPainter to actually draw this on the screen and now I'm trying to set the grab functionality so the user can rotate it.

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

I can use a GestureDetector widget to get a callback when the user touches the screen, but I need to know where it is relative to the center of the knob. Unfortunately, the position provided by the GestureDetector is in absolute coordinates while the canvas works relative to the origin of the widget. Is there a way I can convert one of these coordinates to the other?

这意味着我需要:

1)一种获得相对于CustomPainter小部件的拍子位置的方法

1) A way to get the tap position relative to the CustomPainter widget

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

2) A way to get the absolute position of the CustomPainter widget

我找不到可以提供上述任何一种的API.是否存在这样的API?

I am unable to find an API which can provide either of these. Does such an API exist?

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

当前旋转恒温器的方式有效，但是由于应用程序栏的高度，触摸的中心"实际上比实际中心高大约一半.

The way it is currently, rotating the thermostat works, but the "center" of the touch is actually about halfway above the real center because of the height of the app bar.

谢谢

推荐答案

您可以使用 RenderBox ，您可以调用 findRenderObject flutter/widgets/BuildContext-class.html"rel =" noreferrer> BuildContext .

You can convert global coordinates to local coordinates using the RenderBox.globalToLocal method. To get the RenderBox, you can call findRenderObject on the 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小部件的大小发生更改时，它可能会表现异常.建议您不要计算getAngleFromPosition的结果并将其保存在onPanUpdate中，并将该角度值传递给_TempPainter构造函数，而不是将局部偏移量存储在_tapPos中.这样，只要用户当前未触摸屏幕，角度就可以在屏幕尺寸改变时保持不变.

This isn't quite right though, because it could behave unexpectedly when the device rotates and the size of your TempPicker widget changes. Instead of storing the local offset in _tapPos, I would recommend that you compute and save the results of getAngleFromPosition in onPanUpdate and pass that angle value to your _TempPainter constructor. That way, the angle will remain unchanged when the screen dimensions change, as long as the user isn't currently touching the screen.

这篇关于获取相对于小部件的分接位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！