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

完毕

Flutter中为图片设置波纹点击效果相关推荐

【Flutter 问题系列第 15 篇】如何给 Flutter 中的图片设置透明度
这是[Flutter 问题系列第 15 篇],如果觉得有用的话,欢迎关注专栏. 在 Flutter 中,如果背景色是颜色的话,我们知道可以直接通过 Color.fromRGBO(r, g, b, op ...
Android在WebView中给图片设置点击事件
好久没有更新博客了,今天来个小知识点.我们知道在WebView中加载的是Html也面,在开发中都是Web前端人员写好以后给个链接我们去用webView进行loadUrl.但是有时突然产品想让你把加载回 ...
给Flutter中的Widget设置透明度
给Flutter中的Widget设置透明度在项目开发中,需要经常用到透明度:比如在app中弹出一个提示框,这个时候的提示框就需要上下左右离边距有一定的距离,然后背景色舍黑色,需要设置透明度为0.4: ...
html5怎么设置表单居中显示图片,如何将html5中的图片设置居中？图片居中的代码！...
在各种形形色色的网页中少不了的就是图片了,在使用和浏览的时候我们看到都是文字的话肯定是不好受的,那么这次就来说说如何将html5中的图片设置居中,下面是小编分享的一些有关于在 html5 中图片如何居 ...
Word中的图片设置嵌入式之后显示不全问题
问题:Word中的图片设置嵌入式之后显示不全原因:行间距设置为了固定值解决: 设置图片为嵌入式,然后将显示不全的图片剪切掉(Ctrl+X). 回车到新的一行. 打开段落,设置行间距为单倍行距. 重 ...
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
cocos2d-x中实现不规则按钮的点击效果
cocos2d-x中实现不规则按钮的点击效果先说一点,这是从别人那里扒来的,亲测有效觉得不错,分享一下: 原理很简单,就是判断按钮图片的点击区域像素点透明度是不是0,需要修改源代码: 我拿coco ...
android l 效果,[原]Android L中水波纹点击效果的实现
博主参加了2014 CSDN博客之星评选,帮我投一票吧. 前言前段时间android L(android 5.0)出来了,界面上做了一些改动,主要是添加了若干动画和一些新的控件,相信大家对view的 ...
iOS中加载Flutter中的图片
在 Flutter 插件开发中,有时需要将 Flutter 中配置的图片资源传递到 Android 或者是 iOS原生中,传递方法如下: //一般应用在Flutter 插件开发中 //注册插件的方法 ...

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

Flutter中为图片设置波纹点击效果相关推荐

最新文章

热门文章