flutter使用InkWell点击没有水波纹效果的解决方法

flutter使用InkWell点击没有水波纹效果的解决方法

  • InkWell点击没有水波纹效果原因,如下所示,就是给InkWell的child设置了颜色,遮挡住了效果

    InkWell(
      splashColor: Colors.cyanAccent,	//这是水波纹颜色,不影响效果的
      child: Container(
        color: Colors.white,	//这句设置的颜色导致点击没有水波纹效果
        alignment: Alignment.center,
        width: double.infinity,
        height: 50,
        child: Text('exit'),
      ),
      onTap: () {
        showToast('message');
      },
    ),
    
  • 解决方法,就是外层使用Ink包裹一下,并在Ink里设置颜色即可

    Ink(
      color: Colors.white,	//使用Ink包裹,在这里设置颜色
      child: InkWell(
        splashColor: Colors.cyanAccent,
        child: Container(
          alignment: Alignment.center,
          width: double.infinity,
          height: 50,
          child: Text('exit'),
        ),
        onTap: () {
          showToast('message');
        },
      ),
    ),
    

所以,我一般直接使用FlatButton,既可以添加点击事件,也有水波纹效果。

上一篇:python-Matplotlib绘制饼图


下一篇:Flutter 中的常见的按钮组件 以及自 定义按钮组件