InkWell没有显示涟漪效应

Question

点击容器会触发onTap()处理程序，但不会显示任何墨水溅效果。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
            color: Colors.orange,
          ),
        ),
      ),
    );
  }
}

我试着把InkWell放在Container里但是徒劳无功。

Answer 1

我认为在容器中添加颜色可以覆盖墨水效果

https://docs.flutter.io/flutter/material/InkWell/InkWell.html

这段代码似乎有效

  body: new Center(
    child: new Container(
      child: new Material(
        child: new InkWell(
          onTap: (){print("tapped");},
          child: new Container(
            width: 100.0,
            height: 100.0,
          ),
        ),
        color: Colors.transparent,
      ),
      color: Colors.orange,
    ),
  ),

只需点击中间的方块。

编辑：我找到了bug报告。 https://github.com/flutter/flutter/issues/3782

这实际上是预期的，但我们应该更新文档以使其更清晰。

发生了什么，材料规格说飞溅实际上是材料上的墨水。因此，当我们飞溅时，我们所做的就是让我们确实让Material小部件完成了飞溅。如果你在材料上面有东西，我们会在它下面飞溅，你看不到它。

我想添加一个“MaterialImage”小部件，它概念性地将其图像打印到Material中，这样飞溅就会在图像上方。我们可以有一个MaterialDecoration，它可以为装饰做类似的事情。或者我们可以让材料本身进行装饰。现在它需要一种颜色，但我们可以扩展到整个装饰。然而，目前尚不清楚具有渐变的材料是否与材料规格兼容，所以我不确定是否应该这样做。

在短期内，如果您只需要一个解决方法，您可以将材料放在容器的顶部，材料设置为使用“透明度”类型，然后将墨水放入其中。

--Hi些

Answer 2

步骤1.使用Material作为InkWell的父级，否则不会显示涟漪效应。

步骤2.将color提供给Material小部件，这将是您在Container中使用的颜色。

步骤3.即使您没有任何东西可以处理，也不要忘记使用onTap()。

简单的例子：

Widget myWidget() {
  return Material( // needed
    color: Colors.orange,
    child: InkWell(
      onTap: () {}, // needed
      child: Container(width: 100.0, height: 100.0),
    ),
  );
}

Answer 3

在添加之前，InkWell（）永远不会显示涟漪效果

onTap : () {} 

InkWell中的参数，因为它只在您指定此参数时才开始侦听您的点击。

Answer 4

我遇到了同样的问题，试图在ListView中创建InkWell的交替颜色。在这种特殊情况下，有一个简单的解决方案：将替代品包装在使用大部分透明色调/亮度变化的Container中 - InkWell触摸动画仍然可以在其下方看到。无需材料。注意在尝试使用Materal解决此问题时还有其他问题 - 例如，它将覆盖您使用默认的DefaultTextStyle（它安装AnimatedDefaultTextStyle），这是一个巨大的痛苦。

Answer 5

更好的方法是使用Ink小部件而不是任何其他小部件。

您可以在color小部件本身中定义Ink而不是在容器内定义

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

。

下面的代码将起作用。

qazxswpoi