flutter - 带有 CustomPaint 的 Flutter GestureDetector 不起作用
问题描述
我正在尝试使用 CustomPaint 和 GestureDetector 创建一些自定义小部件。但是,我无法使用 GestureDetector 与绘制的形状正确交互。如果容器是屏幕宽度和高度,或者根本没有,我只能检测一种形状的 onTap。
请注意,我已经尝试了所有HitTestBehavior
类型。
这是代码,但它没有检测到任何 onTap:
class CanvasObject {
Color color = Colors.green[800];
double strokeWidth = 10.0;
PaintingStyle style = PaintingStyle.stroke;
}
class CanvasNodeObject extends CanvasObject {
double x;
double y;
double radius = 20;
PaintingStyle style = PaintingStyle.fill;
CanvasNodeObject({@required this.x, @required this.y});
}
class CanvasNodePainter extends CustomPainter {
CanvasNodeObject node;
CanvasNodePainter({this.node});
@override
void paint(Canvas canvas, Size size) {
Path path;
Paint nodePaint = Paint()
..color = node.color
..style = node.style;
path = Path();
path.moveTo(0, 0);
path.addOval(
Rect.fromCircle(center: Offset(0, 0), radius: node.radius));
canvas.drawPath(path, nodePaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
class TestLineDrawing extends StatefulWidget {
CanvasNodeObject startNode;
CanvasNodeObject endNode;
CanvasLineObject line;
TestLineDrawing({List<double> x, List<double> y})
: assert(x.length == 2),
assert(y.length == 2) {
startNode = CanvasNodeObject(x: x[0], y: y[0]);
endNode = CanvasNodeObject(x: x[1], y: y[1]);
line = CanvasLineObject(x: x, y: y);
}
@override
_TestLineDrawingState createState() => _TestLineDrawingState();
}
class _TestLineDrawingState extends State<TestLineDrawing> {
List<Widget> line() {
return [
Positioned(
top: widget.endNode.x,
left: widget.endNode.y,
child:
GestureDetector(
behavior: HitTestBehavior.opaque,
child:
Container(
height: widget.endNode.radius,
width: widget.endNode.radius,
child: CustomPaint(painter: CanvasNodePainter(node: widget.endNode))),
onTap: () {
setState(() {
Random random = Random();
widget.endNode.color = Color.fromARGB(255, random.nextInt(255), random.nextInt(255), random.nextInt(255));
debugPrint("EndNodeOnPress " + widget.endNode.color.toString());
});
},
)),
];
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: line(),
));
}
解决方案
我通过执行以下操作解决了这个问题:
path
将所有路径添加到名为using的顶级路径Path::addPath
- 覆盖
hitTest
和使用Path::contains
@override
bool hitTest(Offset position) {
bool hit = path.contains(position);
return hit;
}
推荐阅读
- aws-lambda - 如何将区域作为 aws java lambda 函数的查询参数传递
- javascript - 当我不点击项目时,为什么 JavaScript 会执行“点击”事件?
- java - 从文件上传弹性搜索中的数据
- javascript - 使用对象参数将 javascript 代码绑定到 android 代码
- hyperledger-fabric - Hyperledger 结构是否每个对等方多次广播事件?
- graphql - 如何在 GraphQL 对象中组合多个字段
- java - SOAP Web 服务优于 REST 的实时实际情况?
- entity-framework-core-2.1 - Entity Framework Core 2.1 System.Data.SqlClient.SqlException (0x80131904):类型标志不是定义的系统类型
- python-3.x - 我可以将文本文件转换为 python 字典吗?
- reactjs - React JS 条件渲染,如 Eval