时间:2021-05-20
在flutter 开发中用InkWell或者GestureDetector将某个组件包起来,已添加点击事件。
GestureDetector 使用点击无水波纹出现,InkWell可以实现水波纹效果。
正常情况下使用 :
如果在InkWell的上下都出现的颜色的设置,如上中的Container中如果加入了color:Colors.white,或者是Container中的其他widget设置了coloro属性,这时候InkWell的水波纹效果会无效。
1 widget 设置水波纹点击效果 并设置widget背景
new Center( child: new Material( // 设置背景颜色 默认矩形 color: Colors.purple, child: new InkWell( //点击事件回调 onTap: () {}, //不要在这里设置背景色,for则会遮挡水波纹效果,如果设置的话尽量设置Material下面的color来实现背景色 child: new Container( width: 300.0, height: 50.0, //设置child 居中 alignment: Alignment(0, 0), child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ),或者 可以使用 Ink来设置,与Material设置color 的区别是,Ink可设置背景的形状样式。
new Center( child: new Material( //INK可以实现装饰容器,实现矩形 设置背景色 child: new Ink( //设置背景 默认矩形 color: Colors.purple, child: new InkWell( //点击事件回调 onTap: () {}, child: new Container( width: 300.0, height: 50.0, //设置child 居中 alignment: Alignment(0, 0), child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),2 圆角widget 设置水波纹点击效果
new Center( child: new Material(//INK可以实现装饰容器 child: new Ink( //用ink圆角矩形 // color: Colors.red, decoration: new BoxDecoration( //不能同时”使用Ink的变量color属性以及decoration属性,两个只能存在一个 color: Colors.purple, //设置圆角 borderRadius: new BorderRadius.all(new Radius.circular(25.0)), ), child: new InkWell( //圆角设置,给水波纹也设置同样的圆角 //如果这里不设置就会出现矩形的水波纹效果 borderRadius: new BorderRadius.circular(25.0), //设置点击事件回调 onTap: () { }, child: new Container( width: 300.0, height: 50.0, //设置child 居中 alignment: Alignment(0, 0), child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),如果 InkWell 与Ink 不同时设置相同的圆角,例如 lnk 设置的圆角为20,而Ink没有设置,就会出现 矩形的水波纹点击效果
3 圆角widget 设置自定义水波纹颜色点击效果
new Center(child: new Material(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)), //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层 //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: 300.0, height: 50.0, //设置child 居中 alignment: Alignment(0, 0), child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),4 圆角widget 设置高亮颜色点击效果
new Center( child: new Material( child: new Ink( //设置背景 decoration: new BoxDecoration( color: Colors.purple, borderRadius: new BorderRadius.all(new Radius.circular(30.0)), ), child: new InkResponse( borderRadius: new BorderRadius.all(new Radius.circular(30.0)), //点击或者toch控件高亮时显示的控件在控件上层,水波纹下层 highlightColor: Colors.purple[800], //点击或者toch控件高亮的shape形状 highlightShape: BoxShape.rectangle, //.InkResponse内部的radius这个需要注意的是,我们需要半径大于控件的宽,如果radius过小,显示的水波纹就是一个很小的圆, //水波纹的半径 radius: 0.0, //水波纹的颜色 设置了highlightColor属性后 splashColor将不起效果 splashColor: Colors.red, //true表示要剪裁水波纹响应的界面 false不剪裁 如果控件是圆角不剪裁的话水波纹是矩形 containedInkWell: true, onTap: () { print( 'click'); }, child: new Container( //不能在InkResponse的child容器内部设置装饰器颜色,否则会遮盖住水波纹颜色的,containedInkWell设置为false就能看到是否是遮盖了。 width: 300.0, height: 50.0, //设置child 居中 alignment: Alignment(0, 0), child: Text("登录",style: TextStyle(color: Colors.white,fontSize: 16.0),), ), ), ), ), ),以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Android实现水波纹点击效果只在Android5.0以上版本有效,水波纹点击效果代码供大家参考,具体内容如下圆角背景的水波纹效果(如上图)1.定义一个普通圆
前言水波纹效果大致上可以分为两类,一类是有界水波纹,而另一类是无界水波纹,较为广泛使用的是有界水波纹。系统自带的水波纹实现系统自带的方法非常方便,只需要给相应的
今天,我们继续分享JavaScript实现的效果例子,这篇文章会介绍使用JavaScript实现水波纹效果。水波效果以图片为背景,点击图片任意位置都会触发。有时
液晶显示器有水波纹解决方法和原因分析,如何解决水波纹问题?LCD刚刚买回家,就出现了水波纹问题。所谓的水波纹问题,就是指屏幕上的暗波线发生干扰的一种形式,给用户
本文实例为大家分享了RecyclerView实现水波纹点击效果的具体代码,供大家参考,具体内容如下效果图item.xml这里就是主要设置background为我