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",),
            ),
          ),
        ),
      ),
    );
  }

完毕
公众号 我的大前端生涯

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页