Flutter使用InkWell无水波纹效果

InkWell在父容器设置了背景色后没有点击效果的原因主要是因为InkWell的点击效果是通过Material组件实现的,而当InkWell不在Material内部时,其点击效果无法正常显示。
在InkWell的外层再套上Matetial 以及 Ink组件

Material(
  child: Ink(
    child:
      InkWell(
        onTap: () { },
        child: Container(
           height: 50.0,
           color: Colors.white,
           child: Text( "点击",
               maxLines: 1,
               style: TextStyle(color: color),
               overflow: TextOverflow.ellipsis,
               ),
          ),
      ),
    ),
  )

InkWell 在父容器设置了背景色后,没有点击效果了。

使用Ink包裹InkWell:可以在InkWell外层再包裹一个Ink组件,并在Ink中设置颜色。

Ink(
  color: Colors.white, // 设置背景色
  child: InkWell(
    onTap: () {// 点击事件
      
    },
    child: Container(
      color: Colors.white, // 设置背景色
      child: Text('点击!!'),
    ),
  ),
);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容