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


当前回答

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: Material(
color: Colors.transparent
child: InkWell(
  onTap: (){ print("this Ripple!";},
  splashColor: Colors.greenAccent,
  child: Container(
    height:100.0,
    color: Colors.white,
  ),
),
),

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

我可以通过使用Stack使我的情况工作。

Stack(
  children: [
    MyCustomWidget(), //              <--- Put this on bottom
    Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Ink(
          width: 100,
          height: 100,
        ),
      ),
    ),
  ],
),

本页上的其他答案对我不起作用的原因是我的自定义小部件隐藏了墨水效果,而且我没有一个普通的图像(所以我不能使用ink .image)。

编辑:

你还是可以用墨的。图像,如果您将图像转换为正确的格式。

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

用材料包裹InkWell,然后使用你需要的颜色:

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: Material(
          color: Colors.orange,
          child: new InkWell(
            onTap: (){ print("tapped"); },
            child: new Container(
              width: 100.0,
              height: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}

我已经找到了这个解决方法。我认为它可以帮助你:

Material(
      color: Theme.of(context).primaryColor,
      child: InkWell(
        splashColor: Theme.of(context).primaryColorLight,
        child: Container(
          height: 100,
        ),
        onTap: () {},
      ),
    )

颜色被赋予材质小部件。它是小部件的默认颜色。 你可以使用Inkwell的splashColor属性来调整波纹效果的颜色。