点击容器触发onTap()处理程序,但不会显示任何墨水飞溅效果。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new InkWell(
onTap: (){print("tapped");},
child: new Container(
width: 100.0,
height: 100.0,
color: Colors.orange,
),
),
),
);
}
}
我试着把InkWell放在容器里,但徒劳。
更好的方法是使用Ink小部件而不是其他小部件。
而不是在容器内定义颜色,你可以在墨水小部件本身中定义它。
下面的代码将工作。
Ink(
color: Colors.orange,
child: InkWell(
child: Container(
width: 100,
height: 100,
),
onTap: () {},
),
)
不要忘记在InkWell中添加onTap:(){},否则它会
也没有显示出涟漪效应。
我可以通过使用Stack使我的情况工作。
Stack(
children: [
MyCustomWidget(), // <--- Put this on bottom
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Ink(
width: 100,
height: 100,
),
),
),
],
),
本页上的其他答案对我不起作用的原因是我的自定义小部件隐藏了墨水效果,而且我没有一个普通的图像(所以我不能使用ink .image)。
编辑:
你还是可以用墨的。图像,如果您将图像转换为正确的格式。
用简单的话快速解决:
此解决方案适用于小部件树的任何位置。
只需在InkWell之前添加额外的材质,如下所示:
return Container(
.......code.......
),
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Container(
.......code.......
),
),
),
);
参考:
https://api.flutter.dev/flutter/material/InkWell-class.html
“墨水飞溅不可见!”