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


当前回答

您可能已经在主题或材质的父元素中设置了属性

ThemeData(
 ...
 splashFactory: NoSplash.splashFactory,
 ...
)

如果你不想要飞溅效果的特定使用它明确

 InkWell(
          splashFactory: NoSplash.splashFactory,
          ...
          child: Row(
          ...
          )
        );

其他回答

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

onTap : () {} 

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

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

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

  child: new Material(
    color: Colors.transparent
    child: new InkWell(
      onTap: (){},
      child: new Container(
        width: 100.0,
        height: 100.0,
        color: Colors.amber,
      ),
    ),
  ),
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。

这对我来说很管用:

Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      splashColor: Colors.orange,
      child: Text('Hello'), // actually here it's a Container wrapping an image
      onTap: () {
        print('Click');
      },
    ));

在这里尝试了很多答案后,我得出的答案是:

设置splashColor 在材质中包装InkWell(颜色:Colors.white.withOpacity(0.0), ..)

感谢这里的答案让我明白了这两点

这是我发现并一直使用的最好的方法。你可以试试。

用InkWell包装Widget 用材料包裹InkWell 无论如何,设置不透明度为0%。例如:color: Colors.white.withOpacity(0.0), 材料( 颜色:Colors.white.withOpacity (0.0), 孩子:墨水池( child:容器(宽:100,高:100), onTap: () {print(“哇!涟漪”);}, ), )