点击容器会触发onTap()处理程序,但不会显示任何墨水飞溅效果。
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内部,Container但徒劳无功。
InkWell
Container
我认为给容器添加颜色覆盖了墨水效果
https://api.flutter.dev/flutter/material/InkWell/InkWell.html
这段代码似乎工作
body: new Center( child: new Container( child: new Material( child: new InkWell( onTap: (){print("tapped");}, child: new Container( width: 100.0, height: 100.0, ), ), color: Colors.transparent, ), color: Colors.orange, ), ),
只需单击中间的正方形。
编辑:我找到了错误报告。https://github.com/flutter/flutter/issues/3782
这实际上符合预期,尽管我们应该更新文档以使其更清晰。 发生的事情是材质规范说飞溅实际上是材质上的墨水。所以当我们飞溅时,我们所做的就是让 Material 小部件进行飞溅。如果您在材质之上有什么东西,我们会在它下面飞溅,而您看不到它。 我想添加一个“MaterialImage”小部件,它在概念上也将其图像打印到材质中,这样飞溅就会覆盖在图像上。我们可以有一个 MaterialDecoration,它对装饰做类似的事情。或者我们可以让 Material 本身进行装饰。现在它需要一种颜色,但我们可以将其扩展到整个装饰。不过,尚不清楚具有渐变的材质是否真的与材质规范兼容,所以我不确定我们是否应该这样做。 在短期内,如果您只是需要一个解决方法,您可以在容器顶部放置一个材质,将材质设置为使用“透明”类型,然后将墨水很好地放入其中。
这实际上符合预期,尽管我们应该更新文档以使其更清晰。
发生的事情是材质规范说飞溅实际上是材质上的墨水。所以当我们飞溅时,我们所做的就是让 Material 小部件进行飞溅。如果您在材质之上有什么东西,我们会在它下面飞溅,而您看不到它。
我想添加一个“MaterialImage”小部件,它在概念上也将其图像打印到材质中,这样飞溅就会覆盖在图像上。我们可以有一个 MaterialDecoration,它对装饰做类似的事情。或者我们可以让 Material 本身进行装饰。现在它需要一种颜色,但我们可以将其扩展到整个装饰。不过,尚不清楚具有渐变的材质是否真的与材质规范兼容,所以我不确定我们是否应该这样做。
在短期内,如果您只是需要一个解决方法,您可以在容器顶部放置一个材质,将材质设置为使用“透明”类型,然后将墨水很好地放入其中。
--hixie
更新:Hixie 去年合并了一个新的 Ink 解决方案。Ink 提供了一种在图像上飞溅的便捷方式。
testWidgets('Does the Ink widget render anything', (WidgetTester tester) async { await tester.pumpWidget( new Material( child: new Center( child: new Ink( color: Colors.blue, width: 200.0, height: 200.0, child: new InkWell( splashColor: Colors.green, onTap: () { }, ), ), ), ), ); Material( color: Colors.grey[800], child: Center( child: Ink.image( image: AssetImage('cat.jpeg'), fit: BoxFit.cover, width: 300.0, height: 200.0, child: InkWell( onTap: () { /* ... */ }, child: Align( alignment: Alignment.topLeft, child: Padding( padding: const EdgeInsets.all(10.0), child: Text('KITTEN', style: TextStyle(fontWeight: FontWeight.w900, color: Colors.white)), ), ) ), ), ), )
请注意:我没有测试新的 Ink Widget。我处理了来自 ink_paint_test.dart 和 Ink 类文档的代码
https://github.com/Hixie/flutter/blob/1f6531984984f52328e66c0cd500a8d517964564/packages/flutter/test/material/ink_paint_test.dart
https://github.com/flutter/flutter/pull/13900
https://api.flutter.dev/flutter/material/Ink- class.html