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


当前回答

现在使用MaterialButton,在更新的版本颤振


Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: MaterialButton(
        child: Text(
          labelText,
          style: TextStyle(fontSize: 22),
        ),
        onPressed: () {},
        color: backgroundColor,
        height: 45,
        minWidth: double.infinity,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(16),
          ),
        ),
      ),
    );
  }

其他回答

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

创建一个支持tap的小部件。 将其包装在InkWell小部件中以管理点击回调和波纹 动画。

这是文档中提到的第二点

例子:

InkWell(
        child: TextButton(
          onPressed: () {},
          child: Text('Tapped'),
          ),
        ),
      ),

这对我来说很管用:

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之前添加额外的材质,如下所示:

return Container(
  .......code.......
  ),
  child: Material(
    type: MaterialType.transparency,
    child: InkWell(
      onTap: () {},
      child: Container(
        .......code.......
      ),
    ),
  ),
);

参考: https://api.flutter.dev/flutter/material/InkWell-class.html “墨水飞溅不可见!”

对我来说,这是另一个问题。InkWell没有显示涟漪效应,当我有onTap功能作为我的小部件定义如下参数。

Function(Result) onTapItem;
...
onTap: onTapItem(result),

我不知道有什么不同,但下一个代码工作得很好。

onTap: (){ onTapItem(result); },