flutter InkWell实现水波纹点击效果

在flutter 开发中用inkwell或者gesturedetector将某个组件包起来，已添加点击事件。

gesturedetector 使用点击无水波纹出现，inkwell可以实现水波纹效果。
正常情况下使用 ：

inkwell(
 //单击事件响应
  ontap: () {
  },
  child: container(
   alignment: alignment(0, 0),
   height: 28,
   width: 120,
   child: text("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),),
    ),
    ),
   ),
   ),
  ),

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。