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


当前回答

截图:


使用墨水小部件包装在一个InkWell。

InkWell(
  onTap: () {}, // Handle your onTap 
  child: Ink(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

其他回答

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

onTap : () {} 

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

当你指定这个参数时,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.

为了处理连锁反应,你应该使用以下规则:

onTap不应该为空(或空)。 InkWell必须在任何材质小部件中

确保你没有在材质主题中添加以下属性:

(对我来说,这就是问题所在)

splashColor: Colors.transparent
splashFactory: NoSplash.splashFactory

eg:-

MaterialApp(
  home:......,
  theme: ThemeData(
    splashFactory: NoSplash.splashFactory, // Remove this
    splashColor: AppColors.transparent, // Remove this OR Change the color
    ......         
  ),
)

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

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