其他分享
首页 > 其他分享> > Flutter中为图片设置波纹点击效果

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

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

标签:水波纹,Ink,Flutter,点击,child,new,图片,波纹,中为
来源: https://blog.51cto.com/928343994/2841716