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