如何在其他小部件上方绘制InkResponse？

Question

我在Column中有一个LeafRenderObjectWidget：

Column(children: [CustomRenderObject(), InkResponse(child: ..), ...])

在此之下，有一个InkResponse。通常，InkResponse中的启动和突出显示将绘制在Column中的先前小部件上方。如果我有以下情况，则突出显示和飞溅将显示在Container上方：

Column(children: [Container(height: ..), InkResponse(child: ..), ...])

但是，在使用RenderObject的我的场景中，我在{{3}的CustomRenderObject小部件的底部 }将被绘制在上方 InkResponse的上方并突出显示。
Material是Column的父级。

这意味着我的InkReponse突出显示和初始显示在顶部已被切除。我不想在InkResponse上添加其他填充。我如何在InkResponse上方绘制RenderBox？

Answer 1

解决此问题的方法是described in the troubleshooting section of the InkResponse class。

如果您只是使用简单的彩色 Container或类似的东西，则可以改用Ink widget，它会画在Material上，因此在上方显示InkResponse的高光和飞溅。

另一种解决方案是添加类型Material的{​​{1}}：

MaterialType.transparency

它将直接位于Material(type: MaterialType.transparency, child: InkResponse(..)) 下方。但是，这不能解决我的问题，因为它将InkResponse剪切为矩形。

Answer 2

InkResponse会在树中而不是兄弟姐妹中的父窗口小部件上方绘制启动画面。这就解释了为什么它在Material上方的Column小部件中绘制，因为Column本身只是布局MultiChildRenderObjectWidget。

您提供的解决方案实际上是有时使用的一种好方法，但是由于您想在LeafRenderObjectWidget中渲染飞溅效果，并且由于它没有子项，因此Flutter不知道实际在哪里您要渲染飞溅效果。恐怕您不能使用InkResponse在叶子小部件中渲染飞溅。

一个可能有效的 ugly 解决方案，可以从使用Stack到将每个小部件放置在另一个小部件的顶部开始，但是您仍然必须确保它们将具有一样的外观。如果它是一个复杂的渲染对象，这可能会很棘手。