InkWell和InkResponse区别:

InkWell继承与InkResponse
InkWell使用自定义水墨颜色属性(splashColor)会把文本覆盖掉,InkResponse不会!(稍后详细介绍)
InkWell比InkResponse显示水墨会更快一点

InkWell

这里只列举常用属性,加粗是必加属性

InkWell参数	类型	说明
highlightColor	Color	高亮颜色
splashColor	Color	水波纹颜色
radius	double	水波纹半径
borderRadius	BorderRadius	水波纹形状
onTap	GestureTapCallback	单击事件
onDoubleTap	GestureTapCallback	双击事件
onLongPress	GestureLongPressCallback	长按事件

简单事例:

 InkWell(radius: 300,//可以不加// highlightColor: Colors.teal, //设置高亮颜色splashColor: Colors.black,//水波纹形状borderRadius: new BorderRadius.circular(25),//------√------onTap: () {print('--单击--');},// onDoubleTap: (){//   print('--双击--');// },// onLongPress: (){//   print('--长按--');// },child: Container(width: 200,height: 50,alignment: Alignment.center,child: Text("InkWell"),),),

效果图(1.1):

可能会有朋友有这样的需求,需要将初始的水波纹设置为黄色,然后点击的时候才出现黑色的水波纹,

将Container设置为黄色

  InkWell(radius: 300,//可以不加// highlightColor: Colors.teal, //设置高亮颜色splashColor: Colors.black,//水波纹形状borderRadius: new BorderRadius.circular(25),onTap: () {print('--单击--');},child: Container(color: Colors.yellow,width: 200,height: 50,alignment: Alignment.center,child: Text("InkWell"),),

效果图(1.2):

从效果图(1.2)中可以看出,无论我怎么点击,他也不会出现水波纹效果,难道是我什么地方写错了吗?嘿嘿,当然不是了,这里这个样子是因为Container颜色遮挡掉了水波纹,所以需要用到今天的第二个组件Ink()组件

Ink(decoration:new BoxDecoration(//圆角color: Colors.yellow,borderRadius: new BorderRadius.circular(25),),child: InkWell(//可以不加radius: 300,// highlightColor: Colors.teal, //设置高亮颜色splashColor: Colors.black,//水波纹形状borderRadius: new BorderRadius.circular(25),//------√------onTap: () {print('--单击--');},child: Container(// color: Colors.yellow,这里的颜色不能加!!!width: 200,height: 50,alignment: Alignment.center,child: Text("InkWell"),),),)

效果图(1.4):

可以看出基本已经实现了咋们所所得效果,但是还是有问题可不可以使用水波纹的时候,不将文本覆盖掉,这就用到了InkPesponce()组件,这也是他俩的区别之一.

高亮颜色事例
不建议与水波纹颜色(splashColor)同时存在

 Ink(decoration:new BoxDecoration(color: Colors.yellow,borderRadius: new BorderRadius.circular(25),),child: InkWell(//可以不加radius: 300,highlightColor: Colors.teal, //设置高亮颜色// splashColor: Colors.black,//水波纹形状borderRadius: new BorderRadius.circular(25),//------√------onTap: () {print('--单击--');},child: Container(// color: Colors.yellow,这里的颜色不能加!!!width: 200,height: 50,alignment: Alignment.center,child: Text("InkWell"),),),)

效果图(1.4):

InkResponse

这里只列举常用属性,加粗是必加属性

InkResponse参数	类型	说明
highlightColor	Color	高亮颜色
splashColor	Color	水波纹颜色
radius	double	水波纹半径
borderRadius	BorderRadius	水波纹形状
onTap	GestureTapCallback	单击事件
onDoubleTap	GestureTapCallback	双击事件
onLongPress	GestureLongPressCallback	长按事件
containedInkWell	bool	是否剪切为合适角度,建议为设置为true
highlightShape	BoxShape	BoxShape.rectangle矩形(建议使用) BoxShape.circle圆形
highlightColor	Color	高亮颜色

InkResponse与InkWell及其相似,只是有个别参数不同而已,直接看代码吧~

  Padding(padding: EdgeInsets.only(top: 30),child: new Ink(//设置背景decoration: new BoxDecoration(color: Colors.purple,borderRadius:new BorderRadius.all(new Radius.circular(25.0)),),child: new InkResponse(borderRadius:new BorderRadius.all(new Radius.circular(25.0)),//点击控件高亮时显示的控件在控件上层,水波纹下层，如果高亮颜色显示的话,水波纹只有在高亮状态下显示//highlightColor: Colors.yellowAccent,  //高亮颜色//点击或者toch控件高亮的shape形状highlightShape: BoxShape.rectangle,//  ----√----/*  InkResponse内部的radius这个需要注意的是，我们需要半径大于控件的宽，如果radius过小，显示的水波纹就是一个很小的圆，*///水波纹的半径radius: 300.0,//水波纹的颜色splashColor: Colors.black,//true表示要剪裁水波纹响应的界面   false不剪裁  如果控件是圆角不剪裁的话水波纹是矩形containedInkWell: true,//  ----√----//点击事件onTap: () {//  ----√----print("click");},child: new Container(//不能在InkResponse的child容器内部设置装饰器颜色，// 否则会遮盖住水波纹颜色的，containedInkWell设置为false就能看到是否是遮盖了。width: 200.0,height: 50.0,//设置child 居中alignment: Alignment(0, 0),child: Text("InkResponse",style: TextStyle(color: Colors.white, fontSize: 16.0),),),),),)

效果图(2.1):

可以看出:

InkResponse不会将文本覆盖掉,然而InkWell会将文本覆盖掉,
InkResponse使用起来会有比较多的参数

如果有兴趣的话建议大家使用InkResponse()组件,毕竟是父类,可选的也比较多,当然使用InkWell()也是可以的

完整代码

上一章:Flutter 夜间模式及字体设置(2.2)

下一章:Flutter AnimatedWidget,AnimatedBuilder动画2.4

原创不易,您的点赞就是对我最大的支持,请留下您的点赞吧~

Flutter Ink,InkWell,InkResponse水波纹实现(2.3)相关推荐

Flutter InkWell 和 Ink --按钮“水波纹”效果
InkWell InkWell组件在用户点击时出现"水波纹"效果,InkWell简单用法: InkWell(onTap: (){},child: Text('这是InkWell点击 ...
Flutter 点击水波纹效果
FlatButton 原本已经包含了点击水波纹效果不过目前已经弃用,由TextButton 代替,但 TextButton 的效果感觉没有 FlatButton 的好,另外 MaterialBu ...
Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过文章底部扫码关注 [x2] ...
Flutter 水波纹动画效果实现
Flutter 水波纹动画效果实现 1. 先上效果图: 2. 实现 2.1 尺寸渐变结合透明度渐变 2.2 多个基本动画效果叠加 3. 总结 1. 先上效果图: 2. 实现我们将该动画拆成三部分来实 ...
Flutter中为图片设置波纹点击效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章为图片添加水波纹点击效 ...
android自定义水波纹,Android自定义View——实现水波纹效果类似剩余流量球(示例代码)...
最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼一:先一步一步来分解一下实现的过程需要绘制一个正弦曲线(sin)或者余弦曲线(c ...
震惊！原来Android OpenGL ES可以这样用，实现（水波纹）涟漪效果超惊艳！
用几行代码实现惊艳的特效. 作者:字节流动链接:https://juejin.im/post/5ed9c9445188254344768bd6 水波纹效果原理最近一个做视频滤镜的朋友,让我给他做一 ...
android自定义WaveView水波纹控件
WaveView Github Repository and libaray https://github.com/onlynight/WaveView 首先看下演示demo demo中可以看到不同高 ...
Android自定义水波纹动画Layout
Android自定义水波纹动画Layout 源码是双11的时候就写好了,但是我觉得当天发不太好,所以推迟了几天,没想到过了双11女友就变成了前女友,桑心.唉不说了,来看看代码吧. 展示效果 Hi前辈 ...

Flutter Ink,InkWell,InkResponse水波纹实现(2.3)

此篇给大家介绍的是水波纹实现的方法,说起水波纹,如果要在android实现是有点困难的,可是在flutter中只需要用到Ink组件即可完美的实现,接下来就是对Ink组建的简单介绍啦~

InkWell和InkResponse区别:

InkWell

InkResponse

Flutter Ink,InkWell,InkResponse水波纹实现(2.3)相关推荐

最新文章

热门文章