点击容器触发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放在容器里,但徒劳。


当前回答

确保你没有在材质主题中添加以下属性:

(对我来说,这就是问题所在)

splashColor: Colors.transparent
splashFactory: NoSplash.splashFactory

eg:-

MaterialApp(
  home:......,
  theme: ThemeData(
    splashFactory: NoSplash.splashFactory, // Remove this
    splashColor: AppColors.transparent, // Remove this OR Change the color
    ......         
  ),
)

其他回答

我认为给容器添加颜色是在掩盖墨水的效果

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

This is actually as expected, though we should update the docs to make it clearer. 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. 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去年合并了一个新的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_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

InkWell小部件必须有一个材质小部件作为祖先,否则它不能显示效果。例如: 材料( 孩子:InkWell( 孩子:..... 你必须添加onTap方法来查看实际效果 按钮{RaisedButton,FlatButton等}。 例如->材料( 孩子:InkWell( onTap:(){} 孩子:.....

让我们来看看要点,看看下面的例子,试着理解 InkWell的实际概念。

In Below example Material is parent of InkWell with onTap but it still not working. Please try to understand the concept of it. You should provide some margin to container or other widget to show the effects. Actually below code working fine but we can't see because we did not provide any margin or align so it has no space to show the effects. Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: new Container( width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ); } Below example show InkWell effects only to upwards because we provide space {margin}. Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: new Container( margin: EdgeInsets.only(top: 100.0), width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ); } Below exp. show the effects in all the page because center create margin from all the side. Centre align it's child widget from top, left, right and bottom. Widget build(BuildContext context) { return Center( child: Material( child: new InkWell( onTap: () { print("tapped"); }, child: Center( child: new Container( width: 100.0, height: 100.0, color: Colors.orange, ), ), ), ), ); }

InkWell()将永远不会显示涟漪效应,直到您添加

onTap : () {} 

或任何回调,如onDoubleTap, onLongPress等。

当你指定这个参数时,InkWell才会开始监听你的点击。

您可能已经在主题或材质的父元素中设置了属性

ThemeData(
 ...
 splashFactory: NoSplash.splashFactory,
 ...
)

如果你不想要飞溅效果的特定使用它明确

 InkWell(
          splashFactory: NoSplash.splashFactory,
          ...
          child: Row(
          ...
          )
        );

为材质添加透明颜色在我的案例中起作用:

  child: new Material(
    color: Colors.transparent
    child: new InkWell(
      onTap: (){},
      child: new Container(
        width: 100.0,
        height: 100.0,
        color: Colors.amber,
      ),
    ),
  ),