点击容器触发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放在容器里,但徒劳。


当前回答

I ran into this same problem trying to create an alternating color of InkWell's in a ListView. In that particular case, there's a simple solution: wrap the alternates in a Container that uses a mostly transparent tint/brightness change -- the InkWell touch animation will still be visible beneath it. No Material needed. Note there are other issues when trying to work around this with a Materal -- e.g., it will override a DefaultTextStyle you're using with the default (it installs an AnimatedDefaultTextStyle) which is a huge pain.

其他回答

InkWell()将永远不会显示涟漪效应,直到您添加

onTap : () {} 

或任何回调,如onDoubleTap, onLongPress等。

当你指定这个参数时,InkWell才会开始监听你的点击。

child: Material(
color: Colors.transparent
child: InkWell(
  onTap: (){ print("this Ripple!";},
  splashColor: Colors.greenAccent,
  child: Container(
    height:100.0,
    color: Colors.white,
  ),
),
),

在InkWell之前添加材质,并将颜色设置为Colors.transparent。

为材质添加透明颜色在我的案例中起作用:

  child: new Material(
    color: Colors.transparent
    child: new InkWell(
      onTap: (){},
      child: new Container(
        width: 100.0,
        height: 100.0,
        color: Colors.amber,
      ),
    ),
  ),

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

而不是在容器内定义颜色,你可以在墨水小部件本身中定义它。

下面的代码将工作。

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

不要忘记在InkWell中添加onTap:(){},否则它会 也没有显示出涟漪效应。

我遇到了一个类似的问题,将一个Inkwell添加到现有的复杂小部件中,用一个容器包装一个带有颜色的BoxDecoration。通过添加材质和墨水井,墨水井仍然被盒子装饰遮挡,所以我只是让盒子装饰的颜色稍微不透明,这样墨水井就能被看到