InkWell 未显示涟漪效应 [英] InkWell not showing ripple effect
问题描述
点击容器会触发 onTap() 处理程序，但不会显示任何墨水飞溅效果.
Tapping the container triggers the onTap() handler but does not show any ink splash effect.
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 中，但没有成功.
I tried putting the InkWell inside the Container as well but in vain.
推荐答案
我认为给容器添加颜色是覆盖了墨水效果
I think adding color to the container is covering over the ink effect
https://docs.flutter.io/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,
),
),
只需点击中间的方块即可.
just click the middle square.
我找到了错误报告.https://github.com/flutter/flutter/issues/3782
这实际上符合预期，但我们应该更新文档以使其更清晰.
This is actually as expected, though we should update the docs to make it clearer.
发生的事情是材料规范说飞溅实际上是材料上的墨水.所以当我们飞溅时，我们所做的就是让 Material 小部件来做飞溅.如果你在材质上面有东西，我们会溅到它下面，你看不到它.
What's going on is that the Material spec says that the splashes are actually ink on the Material. So when we splash, what we do is we literally have the Material widget do the splash. If you have something on top of the Material, we splash under it, and you can't see it.
我想添加一个MaterialImage"小部件在概念上也将其图像打印到材质中，以便飞溅会在图像上.我们可以有一个 MaterialDecoration，它对装饰做类似的事情.或者我们可以让 Material 本身进行装饰.现在它需要一种颜色，但我们可以将其扩展到整个装饰.不过，目前尚不清楚具有渐变的材质是否真的与材质规格兼容，因此我不确定我们是否应该这样做.
I have wanted to add a "MaterialImage" widget that conceptually prints its image into the Material as well so that then the splashes would be over the image. We could have a MaterialDecoration which does something similar for a Decoration. Or we could have Material itself take a decoration. Right now it takes a color, but we could extend that to taking a whole decoration. It's not clear whether it's really material-spec-compatible to have a material with a gradient, though, so I'm not sure whether we should do that.
在短期内，如果您只需要一个解决方法，您可以在容器顶部放置一个材质，并将该材质设置为使用透明度"打字，然后把墨水放进去.
In the short run, if you just need a workaround, you can put a Material on top of the container, with the material set to use the "transparency" type, and then put the ink well inside that.
--hixie
更新:Hixie 去年合并了一个新的 Ink 解决方案.Ink 提供了一种在图像上飞溅的便捷方式.
Update: Hixie merged a new Ink solution last year. The Ink provides a convenient way to splash over images.
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 类文档中的代码
Please Note: I did not test the new Ink Widget. I coped the code from ink_paint_test.dart and the Ink class docs
https://github.com/flutter/flutter/pull/13900
https://api.flutter.dev/flutter/material/Ink-类.html
这篇关于InkWell 未显示涟漪效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
