InkWell没有显示涟漪效应

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

当前回答

现在使用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),
          ),
        ),
      ),
    );
  }

2021-06-24 19:49:42

其他回答

用简单的话快速解决:

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

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

参考: https://api.flutter.dev/flutter/material/InkWell-class.html “墨水飞溅不可见!”

2022-05-17 12:52:30

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

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

2021-06-13 06:20:23

I ran into this same problem trying to create an alternating color of InkWell's in a ListView. In that particular case, there's a simple solution: wrap the alternates in a Container that uses a mostly transparent tint/brightness change -- the InkWell touch animation will still be visible beneath it. No Material needed. Note there are other issues when trying to work around this with a Materal -- e.g., it will override a DefaultTextStyle you're using with the default (it installs an AnimatedDefaultTextStyle) which is a huge pain.

2018-10-03 15:36:15

我已经找到了这个解决方法。我认为它可以帮助你:

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

颜色被赋予材质小部件。它是小部件的默认颜色。你可以使用Inkwell的splashColor属性来调整波纹效果的颜色。

2020-06-29 07:00:48

我遇到了一个类似的问题，将一个Inkwell添加到现有的复杂小部件中，用一个容器包装一个带有颜色的BoxDecoration。通过添加材质和墨水井，墨水井仍然被盒子装饰遮挡，所以我只是让盒子装饰的颜色稍微不透明，这样墨水井就能被看到

2020-04-22 07:10:11

InkWell没有显示涟漪效应

推荐文章

最新文章

标签