Question

点击容器会触发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内但是徒劳无功。

Answer 1

我认为在容器中添加颜色会覆盖墨水效果

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,
    ),
  ),

只需点击中间的方块。

编辑：我找到了bug报告。 https://github.com/flutter/flutter/issues/3782

这实际上是预期的，但我们应该更新文档以使其更清晰。

正在进行的是材质规格说飞溅实际上是材质上的墨水。因此，当我们飞溅时，我们所做的就是让我们确实让Material小部件完成了飞溅。如果你在材料上面有东西，我们会在它下面飞溅，你就看不到它。

我想添加一个＆＃34; MaterialImage＆＃34;从概念上将其图像打印到材质中的小部件，然后飞溅将在图像上方。我们可以有一个MaterialDecoration，它可以为装饰做类似的事情。或者我们可以让材料本身进行装饰。现在它需要一种颜色，但我们可以扩展到整个装饰。但是，不清楚具有渐变的材料是否真的与材料规格兼容，所以我不确定是否应该这样做。

在短期内，如果您只是需要一种解决方法，您可以将材料放在容器的顶部，并将材料设置为使用＆＃34;透明度＆＃34;键入，然后将墨水放入其中。

- hixie

Answer 2

第1步。将Material用作InkWell的父项，否则不会显示涟漪效应。

第2步。将color赋予Material小部件，这将成为您在Container中使用的颜色。

第3步。即使您没有什么要处理的，也不要忘记使用onTap()。

简单示例：

Widget myWidget() {
  return Material( // needed
    color: Colors.orange,
    child: InkWell(
      onTap: () {}, // needed
      child: Container(width: 100.0, height: 100.0),
    ),
  );
}

Answer 3

我为我找到了这个解决方案。我认为它可以帮助您：

Material(
      color: Theme.of(context).primaryColor,
      child: InkWell(
        splashColor: Theme.of(context).primaryColorLight,
        child: Container(
          height: 100,
        ),
        onTap: () {},
      ),
    )

Color被赋予了Material小部件。它是窗口小部件的默认颜色。您可以使用Inkwell的splashColor属性来调整波纹效果的颜色。

Answer 4

这对我有用：

Material(
    color: Colors.white.withOpacity(0.0),
    child: InkWell(
      splashColor: Colors.orange,
      child: Text('Hello'), // actually here it's a Container wrapping an image
      onTap: () {
        print('Click');
      },
    ));

在这里尝试了许多答案之后，它是以下各项的组合：

设置splashColor
在InkWell中包装Material(color: Colors.white.withOpacity(0.0), ..)

感谢这里给出的2分答案

Answer 5

InkWell（）永远不会显示波纹效果，除非您添加

onTap : () {}

InkWell内部的参数，因为只有在指定此参数后，它才会开始监听您的抽头。

Answer 6

InkWell小部件必须具有“材质”小部件作为祖先，否则它将无法显示效果。例如：
```
Material(
  child : InkWell(
    child : .....
```

您必须添加onTap方法才能看到实际效果，如

 Buttons {RaisedButton,FlatButton etc}.
 e.g -> Material(
             child : InkWell(
                     onTap : (){}
                     child : .....

让我们重点讲解下面的一些示例，并尝试理解 InkWell的实际概念。

在以下示例中，材质是具有onTap的InkWell的父级，但仍无法正常工作。请尝试了解它的概念。您应该为容器或其他小部件提供一些边距以显示效果。实际上，下面的代码可以正常工作，但是我们看不到，因为我们没有提供任何边距或对齐方式，因此没有空间显示效果。
```
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,
        ),  
      ),
    ),
  );
}
```

下面的示例仅显示InkWell效果向上，因为我们提供了{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,
        ),
      ),
    ),
  );
}

低于exp。在所有页面上显示效果，因为居中可以从各个侧面创建边距。将其子控件从顶部，左侧，右侧和底部居中对齐。

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,
          ),
        ),
      ),
    ),
  );
 }

Answer 7

我试图在ListView中创建InkWell的交替颜色时遇到了同样的问题。在这种情况下，有一个简单的解决方案：将替代项包装在使用几乎透明的色调/亮度更改的Container中-InkWell触摸动画在其下方仍然可见。不需要材料。请注意，在尝试使用Materal解决此问题时还有其他问题-例如，它将以默认值覆盖正在使用的DefaultTextStyle（它将安装AnimatedDefaultTextStyle），这是一个巨大的痛苦。

Answer 8

添加onTap:(){}侦听器后，波纹效果应该可以正常工作。如果您在BoxShadow()小部件中使用InkWell()，则无法正常工作。

Answer 9

我能够通过使用堆栈使我的情况正常工作。

Stack(
  children: [
    MyCustomWidget(), //              <--- Put this on bottom
    Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
        child: Ink(
          width: 100,
          height: 100,
        ),
      ),
    ),
  ],
),

此页面上的其他答案对我不起作用的原因是我的自定义小部件隐藏了墨水效果并且我没有普通图像（因此我无法使用 Ink.image）。

编辑：

如果您convert the image to the right format，您仍然可以使用Ink.image。

Answer 10

这是我一直发现和使用它的最佳方法。你可以试试看。

用Widget将InkWell包裹起来
用InkWell将Material换行

无论如何将不透明度设置为0％。例如：color: Colors.white.withOpacity(0.0),

Material(
  color: Colors.white.withOpacity(0.0),
  child: InkWell(
    child: Container(width: 100, height: 100),
    onTap: (){print("Wow! Ripple");},
  ),
)

Answer 11

我遇到了一个类似的问题，即用一个用容器包装一个带颜色的BoxDecoration的容器向一个现有的复杂Widget中添加一个Inkwell。通过添加Material和Inkwell的方式表明，BoxDecoration仍然遮盖了Inkwell，所以我只是使BoxDecoration的颜色略微不透明，从而可以看到Inkwell

Answer 12

圆形小部件的解决方案，如下所示：

Material(
    color: Colors.transparent,
    child: Container(
      alignment: Alignment.center,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_previous,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
          IconButton(
            iconSize: 100,
            enableFeedback: true,
            splashColor: Colors.grey,
            icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
            padding: EdgeInsets.all(0),
            onPressed: () {},
          ),
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_next,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
        ],
      ),
    ),
  )

Answer 13

更好的方法是使用Ink小部件而不是其他任何小部件。

您可以在color小部件本身中定义容器，而不是在容器中定义Ink。

下面的代码将起作用。

Ink(
  color: Colors.orange,
  child: InkWell(
    child: Container(
      width: 100,
      height: 100,
    ),
    onTap: () {},
  ),
)

Answer 14

对我来说，这是另一个问题。当我将onTap函数用作如下定义的小部件的参数时，InkWell不会显示出波纹效应。

Function(Result) onTapItem;
...
onTap: onTapItem(result),

我不知道有什么区别，但是下一个代码运行良好。

onTap: (){ onTapItem(result); },

Answer 15

如果您只想在任何小部件上使用波纹效果：

1-用材料和墨水瓶包装小部件。

2-为材料中的小部件设置颜色。

3- 从不将颜色设置为您希望其波动的小部件。

   Material (
   color: const Color(0xcffFF8906),
   child: InkWell(
   ontap:() { },
   child: Container(
   color: Colors.transparent,
   height: 80,
   width: 80,
 )

Answer 16

设置InkWell容器的颜色

放置在Material小部件内的所有子小部件都采用Material小部件中设置的颜色。因此，我们应该从Material的color属性本身设置颜色。您无法通过任何父Container小部件进行设置。

使用InkWell父窗口小部件创建Material时要注意的另一重要事项是，您应该从“材质”属性本身设置颜色。您无法通过Container进行设置。

因此，我们用于修复InkWell效果和容器颜色的代码如下：

Container(
    margin: EdgeInsets.all(12),
    height: 50.0,
    width: 100.0,
    decoration: BoxDecoration(boxShadow: [
      BoxShadow(
          color: Colors.grey, blurRadius: 4, offset: Offset(0, 2))
    ]),
    child: Material(
      color: Colors.blue,
      child: InkWell(
        child: Center(
            child: Text("My Chip",
                style: Theme.of(context).textTheme.body1)),
        onTap: () {},
      ),
    ),
  )

Answer 17

在我的情况下为 Material 添加透明颜色：

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

Answer 18

现在使用 MaterialButton，在较新版本中颤动


Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: MaterialButton(
        child: Text(
          labelText,
          style: TextStyle(fontSize: 22),
        ),
        onPressed: () {},
        color: backgroundColor,
        height: 45,
        minWidth: double.infinity,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(16),
          ),
        ),
      ),
    );
  }

InkWell没有显示涟漪效应

18 个答案:

编辑：