InkWell不显示涟漪效应

问题描述

点击容器会触发 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 也在容器内，但徒劳。

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

此代码似乎有效

  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.

编辑：我找到了错误报告。

I found the bug report. https://github.com/flutter/flutter/issues/3782

这是材料规格说飞溅实际上是材料上的墨水。因此，当我们进行飞溅时，我们要做的是从字面上让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，它对装饰做类似的事情。或者我们可以让材料本身进行装饰。现在它需要一种颜色，但是我们可以将其扩展到采用整个装饰。不过，尚不清楚具有渐变材质是否真的符合材质规范，所以我不确定是否应该这样做。

I have wanted to add a "MaterialImage" widget which 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合并了一个新的去年的油墨解决方案。墨水提供了一种方便的方式来覆盖图像。

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

这篇关于InkWell不显示涟漪效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！