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

当前回答

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

其他回答

截图:

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

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

2018-10-08 08:11:22

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

2020-04-22 07:10:11

为了处理连锁反应，你应该使用以下规则:

onTap不应该为空(或空)。 InkWell必须在任何材质小部件中

2021-11-09 16:27:47

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

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

下面的代码将工作。

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

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

2019-04-29 05:43:49

现在使用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没有显示涟漪效应

推荐文章

最新文章

标签