InkWell没有显示涟漪效应

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小部件执行启动.如果你在材料上面有东西,我们会在它下面飞溅,你看不到它.

我想添加一个"MaterialImage"小部件,它概念性地将其图像打印到Material中,这样飞溅就会在图像上方.我们可以有一个MaterialDecoration,它可以为装饰做类似的事情.或者我们可以让材料本身进行装饰.现在它需要一种颜色,但我们可以扩展到整个装饰.然而,目前尚不清楚具有渐变的材料是否与材料规格兼容,所以我不确定是否应该这样做.

在短期内,如果您只需要一个解决方法,您可以将材料放在容器的顶部,材料设置为使用"透明度"类型,然后将墨水放在其中.

--hixie

Answer 2

步骤1.Material作为您的父母使用InkWell,否则不会显示涟漪效应.

第2步:给color到Material小部件,这将是你用你的颜色Container.

步骤3.onTap()即使您没有任何东西可以处理,也不要忘记使用.

简单的例子:

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

Answer 3

1. InkWell 小部件必须有一个 Material 小部件作为祖先，否则无法显示效果。例如：

   Material(
     child : InkWell(
       child : .....
   

2. 你必须添加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,
          ),
        ),
      ),
    );
  }
  

• 下面的经验。在所有页面中显示效果，因为中心从所有侧面创建边距。从顶部、左侧、右侧和底部居中对齐它的子部件。

  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 4

2023 更新：非常简单，你必须拥有

按此顺序容器 -> 材质 -> InkWell。

              Container(
                    width: 114,
                    height: 64,
                    decoration: const BoxDecoration(
                      color: AppColorsLight.surfacePrimary,
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                    ),
                    child: Material(
                      color: Colors.transparent,
                      borderRadius: BorderRadius.all(Radius.circular(8)),
                      child: InkWell(
                        splashColor: Colors.white,
                        borderRadius: 
                        BorderRadius.all(Radius.circular(8)),

Answer 5

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

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

Color被赋予材料小部件。它是您的小部件的默认颜色。您可以使用splashColorInkwell 的属性调整波纹效果的颜色。

Answer 6

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

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

下面的代码将起作用。

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

不要忘记onTap: () {}在InkWellelse 中添加一个它也不会显示涟漪效应。

Answer 7

如果您想对任何小部件产生涟漪 效果，只需：

1- 用Material和Inkwell包裹小部件。

2-从Material为小部件设置颜色。

3-永远不要为您希望它涟漪的小部件设置颜色。

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

Answer 8

用简单的话快速解决：

该解决方案适用于小部件树的任何位置。只需在 InkWell 之前添加额外的材质，如下所示：

return Container(
  .......code.......
  ),
  child: Material(
    type: MaterialType.transparency,
    child: InkWell(
      onTap: () {},
      child: Container(
        .......code.......
      ),
    ),
  ),
);

参考： https: //api.flutter.dev/flutter/material/InkWell-class.html 名为“墨水飞溅不可见！”的部分

Answer 9

包裹InkWell并Material使用您需要的颜色：

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: Material(
          color: Colors.orange,
          child: new InkWell(
            onTap: (){ print("tapped"); },
            child: new Container(
              width: 100.0,
              height: 100.0,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 10

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

onTap : () {} 

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