Flutter 中 IconButton 点击效果未生效

Flutter 专栏收录该内容
1 篇文章 0 订阅

Flutter 出了有段时间了,也在逐渐迭代版本,当然坑也都是逐渐踩出来的

今天来聊个IconButton 点击效果(水波纹)丢失的问题,其他带水波纹效果的同理。
当你兴致冲冲的撸了一段代码,比如这样的
页面标题,带有一个返回按钮
咱们先忽略为啥不用自带的效果啥的,就是想自己造(练)轮(代)子(码),结构简单嘛,按照 Flutter 的思路一层一层套,Container啊、Stack啊、Text啊、IconButton啊…,撸完码,开心运行下,哎呦我擦,效果符合预期嘛,开心开心(手动笑脸+10),点击下看看效果,卧槽,我的 IconButton 的点击效果呢??????

问题排查:

splashColor、highlightColor 都写了啊,多次测试无果,遂至QQ群 (Flutter官方社区_771482762) 求问大神,因为我用到了Stack ,就涉及Positioned ,大神跟我说调整下Positioned 位置看看,在此感谢大神提供的思路,因为在测试过程中端倪渐现,因为我的标题背景是渐变色的 BoxDecoration,当 IconButton 挪到右侧有透明度的区域,点击效果有一点痕迹了,于是开始调整 外层 Container 的 decoration 属性,发现果然是被遮盖了,But… 不应该是层层嵌套的吗?怎么就内容在里面显示的好好的,结果点击效果却被覆盖了呢?

百度无果,没备梯子,多次改代码尝试后,确认了问题,想去官方 GitHub 去提个 Issue,查了下,发现已经有人提过类似的 Issue,看看内容以及提及的其他讨论过该问题的 StackOverflow 页面 ,一番查阅之后,明白了,点击效果是水波纹的,这玩意需要在最近的一个Material类控件里绘制,并不是在使用的控件的本体使用,所以我的问题就明确了,点击效果被绘制到外面了。
调整Icon大小之后,确认点击效果确实被覆盖了

解决之道

咱给IconButton 加一层Material 嵌套(为了简化,此处代码对应下面的效果,不是蓝色标题的)
咱给IconButton加一层Material嵌套

注意 Material 的 color、shape 属性,
注意 Material 的 color、shape 属性,
注意 Material 的 color、shape 属性,
重要事情说三遍,详解此处略,一试便知~
效果有了:
简化的代码对应的效果图

代码片段

  Widget _getContainerWithDecoration() {
    return Container(
      height: 48,
      width: Size.infinite.width,
      child: Material(
          color: Colors.transparent,
          shape: CircleBorder(),
          child: IconButton(
              iconSize: 32,
              color: Colors.white,
              icon: Icon(Icons.navigate_before),
              splashColor: Colors.red,
              highlightColor: Colors.green,
              onPressed: () {
                Fluttertoast.showToast(msg: '测试');
              })),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF00A0FF),
            Color(0xFF20A0FF),
            Color(0x8000A0FF),
          ],
        ),
      ),
    );
  }
}

如有谬误,欢迎各位斧正!

  • 0
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值