Flutter点击水波纹效果封装

在flutter中， 普通Widget是没有点击效果的，设置点击事件的时候点着没有感觉。

可以利用Flutter提供的水波纹widget来对控件进行包裹，这样就有点击效果了。

1、使用InkWell实现child点击水波纹效果

class RippleWidget extends StatelessWidget{

  final Function onTap;
  final Widget child;

  RippleWidget({this.child, this.onTap});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: child,
      ///点击颜色
      splashColor: Colors.blue,
      onTap: (){
      	///延迟200ms 效果更明显点
        Future.delayed(Duration(milliseconds: 200), onTap);
      },
    );
  }

}

2、使用Ink加InkWell实现点击控件封装

class RippleButton extends StatelessWidget{

  final Function onTap;///点击事件
  final String title; 
  Decoration decoration = BoxDecoration();
  double radius = 0;
  Color splashColor =  Colors.blue;
  double height = 40;
  double width = 60;
  TextStyle style = Styles.blackTextStyleSp2;

  RippleButton({this.title, this.onTap, this.decoration, this.radius, this.splashColor, this.height, this.width, this.style});

  @override
  Widget build(BuildContext context) {
    return Ink(
      decoration: decoration??BoxDecoration(),
      child: InkWell(
        borderRadius: BorderRadius.all(Radius.circular(radius)),
        splashColor: splashColor,
        child: Container(
          height: height,
          width: width,
          child: Center(child: Text(title, style: style, textAlign: TextAlign.center,),),
        ),
        onTap: onTap,
      ),
    );
  }
}

如果我们的布局有圆角的话，可以使用Ink的decoration给我们点击波纹也添加一层圆角效果。否则控件的点击效果是没有圆角效果的。