点击容器触发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放在容器里,但徒劳。
我已经找到了这个解决方法。我认为它可以帮助你:
Material(
color: Theme.of(context).primaryColor,
child: InkWell(
splashColor: Theme.of(context).primaryColorLight,
child: Container(
height: 100,
),
onTap: () {},
),
)
颜色被赋予材质小部件。它是小部件的默认颜色。
你可以使用Inkwell的splashColor属性来调整波纹效果的颜色。
我可以通过使用Stack使我的情况工作。
Stack(
children: [
MyCustomWidget(), // <--- Put this on bottom
Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Ink(
width: 100,
height: 100,
),
),
),
],
),
本页上的其他答案对我不起作用的原因是我的自定义小部件隐藏了墨水效果,而且我没有一个普通的图像(所以我不能使用ink .image)。
编辑:
你还是可以用墨的。图像,如果您将图像转换为正确的格式。
用材料包裹InkWell,然后使用你需要的颜色:
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: Material(
color: Colors.orange,
child: new InkWell(
onTap: (){ print("tapped"); },
child: new Container(
width: 100.0,
height: 100.0,
),
),
),
),
);
}
}