在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
给我们点击波纹也添加一层圆角效果。否则控件的点击效果是没有圆角效果的。