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

当前回答

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

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

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

2022-11-07 11:56:38

其他回答

创建一个支持tap的小部件。将其包装在InkWell小部件中以管理点击回调和波纹动画。

这是文档中提到的第二点

例子:

InkWell(
        child: TextButton(
          onPressed: () {},
          child: Text('Tapped'),
          ),
        ),
      ),

2022-03-05 06:37:56

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

而不是在容器内定义颜色，你可以在墨水小部件本身中定义它。

下面的代码将工作。

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

不要忘记在InkWell中添加onTap:(){}，否则它会也没有显示出涟漪效应。

2019-04-29 05:43:49

截图:

使用墨水小部件包装在一个InkWell。

InkWell(
  onTap: () {}, // Handle your onTap 
  child: Ink(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

2018-10-08 08:11:22

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

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

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

InkWell没有显示涟漪效应

推荐文章

最新文章

标签