Flutter中为图片设置波纹点击效果

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

• 网易云【玩转大前端】配套课程

• EDU配套 教程

• Flutter开发的点滴积累系列文章

---

为图片添加水波纹点击效果的最终效果如下：

按照常规思路，为一张图片添加水波纹点击事件，开发者通常会使用InkWell或者是InkResponse组件来包裹这个图片，代码如下：

///使用InkResponse为图片添加点击事件
Widget buildInkWellContainer3() {
  return new Material(
    child: new Ink(
      child: new InkResponse(
        child: new Container(
          //设置child 居中
          alignment: Alignment(0, 0),
          child: Image.asset(
            "assets/images/2.0x/banner1.webp",
          ),
        ),
      ),
    ),
  );
}


///使用InkWell为图片添加点击事件
Widget buildInkWellContainer3() {
  return new Material(
    child: new Ink(
      child: new InkWell(
        child: new Container(
          //设置child 居中
          alignment: Alignment(0, 0),
          child: Image.asset(
            "assets/images/2.0x/banner1.webp",
          ),
        ),
      ),
    ),
  );
}

而在实际运行效果中会发现InkWell或者是InkResponse组件来包裹图片可以实现点击事件回调，但是无法出现水波纹效果，其实水波纹效果是有触发的，只不过是在显示Image的下面进行绘制的。

如果确实是需要为图片设置水波纹的点击效果，可以用 Ink.Image包裹住图片，代码如下：

  ///使用InkResponse为图片添加点击事件
  Widget buildInkWellContainer1() {
    return new Material(
      child: new Ink(
        child: new InkWell(
          onTap: (){
            print("图片点击事件");
          },
          child: new Container(
            height: 200,
            //设置child 居中
            alignment: Alignment(0, 0),
            child: Ink.image(
              image: AssetImage("assets/images/2.0x/banner1.webp",),
            ),
          ),
        ),
      ),
    );
  }

---

完毕