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給我們點擊波紋也添加一層圓角效果。否則控件的點擊效果是沒有圓角效果的。