点击容器触发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
    ......         
  ),
)

其他回答

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

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

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

这是文档中提到的第二点

例子:

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

这对我来说很管用:

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(颜色:Colors.white.withOpacity(0.0), ..)

感谢这里的答案让我明白了这两点

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

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

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