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

当前回答

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

这是文档中提到的第二点

例子:

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

2022-03-05 06:37:56

其他回答

child: Material(
color: Colors.transparent
child: InkWell(
  onTap: (){ print("this Ripple!";},
  splashColor: Colors.greenAccent,
  child: Container(
    height:100.0,
    color: Colors.white,
  ),
),
),

在InkWell之前添加材质，并将颜色设置为Colors.transparent。

2021-11-06 03:33:58

如果你想在任何小部件上产生涟漪效应，只需:

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

2-设置颜色小部件从材料。

3-永远不要为你想让它起波纹的小部件设置颜色。

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

2020-12-01 01:44:38

InkWell()将永远不会显示涟漪效应，直到您添加

onTap : () {}

或任何回调，如onDoubleTap, onLongPress等。

当你指定这个参数时，InkWell才会开始监听你的点击。

2018-08-07 16:45:23

截图:

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

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

2018-10-08 08:11:22

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

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

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

InkWell没有显示涟漪效应

推荐文章

最新文章

标签