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

当前回答

循环部件的解决方案，如下所示:

Material(
    color: Colors.transparent,
    child: Container(
      alignment: Alignment.center,
      height: 100,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_previous,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
          IconButton(
            iconSize: 100,
            enableFeedback: true,
            splashColor: Colors.grey,
            icon: Icon(Icons.play_circle_filled, color: Colors.white, size: 100),
            padding: EdgeInsets.all(0),
            onPressed: () {},
          ),
          IconButton(
              enableFeedback: true,
              iconSize: 40,
              icon: Icon(
                Icons.skip_next,
                color: Colors.white,
                size: 40,
              ),
              onPressed: () {}),
        ],
      ),
    ),
  )

2020-06-15 20:25:21

其他回答

创建一个支持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

这是我发现并一直使用的最好的方法。你可以试试。

用InkWell包装Widget 用材料包裹InkWell 无论如何，设置不透明度为0%。例如:color: Colors.white.withOpacity(0.0)，材料( 颜色:Colors.white.withOpacity (0.0), 孩子:墨水池( child:容器(宽:100，高:100)， onTap: () {print(“哇!涟漪”);}, )，）

2019-10-25 10:18:17

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

onTap : () {}

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

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

2018-08-07 16:45:23

InkWell没有显示涟漪效应

推荐文章

最新文章

标签