Flutter 中 IconButton 点击效果未生效

最新推荐文章于 2024-12-26 22:34:58 发布

ChiceT

最新推荐文章于 2024-12-26 22:34:58 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter IconButton 点击效果 Container decoration

本文链接：https://blog.youkuaiyun.com/chiceT/article/details/96474540

本文介绍了在Flutter中遇到IconButton点击效果（水波纹）未显示的问题及解决方案。问题出在装饰BoxDecoration上，点击效果被遮盖。通过在IconButton外层添加Material组件，并设置color和shape属性，可以正确显示点击效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，看看内容以及提及的其他讨论过该问题的