Flutter TextSpan手势识别器在Custom Painter上工作吗

Question

我正在画布上以颤动的方式绘制文本和其他对象。

我想检测鼠标何时在画布上呈现的某些文本上。

TextSpan类具有recognizer属性以及onEnter和onExit。

当文本跨度绘制在画布上时，它们似乎不会被调用。

我需要自己为Canvas上的文本编写命中测试逻辑吗？

Answer 1

我找不到你想要的方法，但我可以用不同的方法来做。在这个例子中，我用MouseRegion包装CustomPaint(因为我用flutter web测试它，你可以用InkWell或GestureDetector为手机重新创建它(，然后我检查鼠标的localPosition是否在TextPainter的矩形内。我在CustomPainter之外创建TextPainter，因为我希望整个画布的大小是TextPainter的两倍。

class GestureText extends StatefulWidget {
const GestureText(this.text, {required this.style, this.maxWidth, Key? key})
: super(key: key);
final String text;
final TextStyle style;
final double? maxWidth;
@override
_GestureTextState createState() => _GestureTextState();
}
class _GestureTextState extends State<GestureText> {
Offset? mousePosition;
@override
Widget build(BuildContext context) {
final TextPainter textPainter = TextPainter(
text: TextSpan(
text: widget.text,
style: widget.style,
),
textDirection: TextDirection.ltr,
)..layout(maxWidth: widget.maxWidth ?? double.infinity);
return Container(
child: MouseRegion(
onHover: (e){
setState(() {
mousePosition = e.localPosition;
});
},
onExit: (e){
setState(() {
mousePosition = null;
});
},
child: CustomPaint(
size: Size(textPainter.size.width*2, textPainter.size.width*2),
painter: GestureTextPainter(textPainter, mousePosition),
),
),
);
}
}
class GestureTextPainter extends CustomPainter {
const GestureTextPainter(this.textPainter, this.mousePosition);
final TextPainter textPainter;
final Offset? mousePosition;
@override
void paint(Canvas canvas, Size size) {
final textOffset = Offset(size.width/2  - textPainter.width/2, size.height/2 - textPainter.height/2); 
// So that the text is in the middle of the canvas
final textRect = Rect.fromLTWH(textOffset.dx, textOffset.dy, textPainter.width, textPainter.height);

if(mousePosition != null && textRect.contains(mousePosition!)){
canvas.drawRect(textRect, Paint()..color=Colors.amber);
}
textPainter.paint(canvas, textOffset);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}