我使用SingleChildRenderObjectWidget构造了一个小部件,并在paintChild方法的帮助下在paint方法中绘制了文本表单字段小部件。但是文本表单域是不交互的,如何使这个文本表单域交互。
代码段:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample'),
),
body: InteractiveViewer(
child: Stack(
children: [
Center(
child: Image.network('https://picsum.photos/250?image=9'),
),
const DrawCanvas(
child: SizedBox(
height: 100,
width: 100,
child: TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Colors.blue)),
border: OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Colors.blue)),
labelText: 'NAME',
),
),
),
),
],
),
),
);
}
}
///
class DrawCanvas extends SingleChildRenderObjectWidget {
const DrawCanvas({
Widget? child,
}) : super(child: child);
@override
RenderCanvas createRenderObject(BuildContext context) {
return RenderCanvas();
}
}
class RenderCanvas extends RenderProxyBox {
RenderCanvas({
RenderBox? child,
});
@override
void paint(PaintingContext context, Offset offset) {
if (child != null) {
context.paintChild(child!, const Offset(550, 200));
}
}
}
1条答案
按热度按时间du7egjpx1#
你可以复制粘贴下面运行完整的代码
原因:
hitTest
失败context.paintChild(child!, const Offset(550, 200));
你在
Offset(550, 200)
中绘制子进程导致hitTest
失败解决方案:如果是错字,可以执行
context.paintChild(child!, offset)
或者你可以传递offset并覆盖
hitTestChildren
(见下文)代码片段
全码
执行结果