Flutter 中 IconButton 点击效果未生效

最新推荐文章于 2024-09-08 14:58:57 发布
原创 最新推荐文章于 2024-09-08 14:58:57 发布 · 4.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Flutter #IconButton #点击效果 #Container #decoration

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

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

最低0.47元/天 解锁文章
Android Flutter在点击事件上添加动画效果
m0_70749039的博客
03-23 1112
在Android App的开发项目中，我们需要在点击事件上实现一个动画效果来提高用户的体验度。比如闲鱼底部中间按钮的那种。该怎么实现呢？一起来看看吧。
【Flutter】实现按钮点击后显示一个60秒的倒计时效果
weixin_45055317的博客
02-27 1064
在这个示例中，当用户点击按钮后，按钮的文本会显示60秒的倒计时，每秒更新一次。倒计时结束后按钮文本会恢复为"Click Me"，按钮恢复可点击状态。要实现按钮点击后显示一个60秒的倒计时效果，可以结合使用Flutter的。来实现每秒更新按钮文本的功能。方法来更新按钮的文本内容。
flutter Stack超出底图范围后，关闭按键点击效果失效
weixin_44911775的博客
09-17 1926
如图，下面添加了一个黑色的底图用来扩充原来的底图范围，白色关闭按键就可以点击得到了。可以给底图再添加一个大点的底图，这两个底图作为一个整体，关闭按键就可以点击了。既然是关闭按键超出了底图范围导致不能点击，那就让关闭按键不超出就可以了。
flutter InkWell实现水波纹点击效果
08-25
主要为大家详细介绍了flutter InkWell实现水波纹点击效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
flutter 的Button按钮组件点击不好使？
Android_Mr_Zhao的博客
11-11 1148
可能是这样的骚年！ 错误写法： child: FlatButton( onPressed: () => (){ Toast.show(context, "忘记密码"); }, padding: EdgeInsets.only(right: 0.0), child: Text( '忘记密码？', style: TextStyles.kLabelStyle, ),
flutter 点击效果
weixin_44911775的博客
03-25 3101
参考 Widget popularArtistTitleSection = Row( children: [ Expanded( child: Container( margin: const EdgeInsets.only(left: 10.0), child: const Text( "人气艺人", style: TextStyl
Flutter中常用的按钮组件-IconButton(可点击的Icon)
不二菜菜子的博客
01-31 3992
Flutter中常用的按钮组件-IconButton(可点击的Icon)
Flutter - BottomNavigationBarItem 自定义点击动画及按钮样式
oyh6857451的博客
06-28 3405
在实际项目开发过程中，app底部tabbar常常有每个公司不同项目自己的专属定制，或自定义动画，或自定义样式；然而系统自带的BottomNavigationBarItem和pub.dev中的第三方库限制太死，并不符合实际用途。 2、重写系统的BottomNavigationBar 3、贴一下lo_home_tab_bar.dart文件，包含了动画创建和控制 4、贴一下demo剩余文件 lo_player_tab_item.dart lo_tab_page.dart main.dart...
Flutter Button使用
且听真言
09-08 1631
Material 组件库中有多种按钮组件如ElevatedButton、TextButton、OutlineButton等，它们的父类是于ButtonStyleButton。2.onPressed属性设置点击回调，如果不提供该回调则按钮会处于禁用状态，禁用状态不响应用户点击。1.按下时都会有“水波文动画”。
Flutter学习 可滚动Widget 中
RikkaTheWorld
12-20 938
文章目录5. AnimatedList5.1 实例代码6. GridView6.1 SliverGridDelegateWithFixedCrossAxisCount6.2 GridView.count6.3 SliverGridDelegateWithMaxCrossAxisExtent6.4 GridView.extent6.5 GridView.builder6.5.1 范例 5. AnimatedList AnimatedList 和 ListView 功能差不多， 顾名思义，它在列表中插入节点或
Flutter学习之旅(二)----MD风格和点击事件
07-21
Flutter学习之旅(二)----MD风格和点击事件,对应博客地址http://blog.youkuaiyun.com/zhangxiangliang2/article/details/75578181
custom_bubble_navigation_bar:Flutter中具有气泡单击效果的自定义导航栏
05-17
custom_navigation_bar 具有气泡单击效果的自定义导航栏。 概述 该项目的灵感和 当您单击导航栏时，此软件包可为您提供可爱的泡泡效果。 盘带： 实施的： 画廊 如何安装 将此添加到包的pubspec.yaml文件中： dependencies : custom_navigation_bar : lastest version 文献资料 注意力 如果您更新从版本下0.6.0 ，也有版本的一些重大更改0.6.0 。 该icon在CustomNavigationBarItem已经从IconData到Widget 。 旧版本 CustomNavigationBarItem ( { @required this .icon, IconData selectedIcon, this .selectedTitle,
flutter 字体演示
孤舟残月梦还长存的专栏
02-12 514
示意图： 字体文件下载地址：https:fonts.google.com 1.首先设置pubspec.yaml 文件：C:\Users\user\StudioProjects\myflutter\pubspec.yaml # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_h.
Flutter 自定义点击组件(水波纹点击效果)
曾阿牛的博客
02-23 3820
但是使用inkWell自定义水波纹组件时，子组件设置背景色或背景图片后，会导致水波纹效果消失。这里使用Stack组件包裹，inkWell放在最上面。样式均由子组件确定！Flutter 中的 Material Design 风格中，点击按钮通常会出现水波纹效果。如果想自定义这种效果，可以使用 InkWell 和 Ink 组件。InkWell：一个具有水波纹效果和触摸事件处理功能的组件。它可以包裹其他组件来实现自定义的水波纹效果。Ink：用于在 InkWell 内部生成水波纹效果的组件。
Flutter点击水波纹效果封装
正义
12-05 1144
在flutter中， 普通Widget是没有点击效果的，设置点击事件的时候点着没有感觉。 可以利用Flutter提供的水波纹widget来对控件进行包裹，这样就有点击效果了。 1、使用InkWell实现child点击水波纹效果 class RippleWidget extends StatelessWidget{ final Function onTap; final Widget ch...
Flutter InputChip 用来实现可点击的标签效果
代码小疯子
10-30 914
InputChip 是Material Design的一个 Widget，用来实现标签效果，InputChip 实现的标签可以实现点击事件以及是否选中的效果
flutter 按钮点击动画
qq_43573997的博客
02-17 982
【代码】flutter 按钮点击动画。
Flutter ActionChip 用来实现点击效果的小标签
代码小疯子
11-02 549
ActionChip 是Material Design的一个 Widget，用来实现可点击的小标签效果。
flutter TextButton实现点击按钮变色效果
qiaojiangbo的博客
11-07 1438
工作中遇到的TextButton使用点击效果
flutterapp怎么在计数器旁边做个减号
最新发布
09-10
在Flutter应用程序中，在计数器旁边添加一个减号通常是为了让用户能够增加或减少计数值。你可以通过以下步骤来实现这个功能： 1. 首先，你需要在UI上创建一个`TextEditingController`来控制计数器的文字内容，并一个`IconButton`用于显示减号。可以使用`TextField`的控制器和`IconButton`库来完成这一步。 ```dart TextEditingController _counterController = TextEditingController(); IconButton minusButton; ``` 2. 设计计数器组件，例如使用`TextFormField`展示计数值，同时将`onChanged`监听器绑定到`_counterController`，以便实时更新计数。 ```dart TextField( controller: _counterController, keyboardType: TextInputType.number, decoration: InputDecoration(labelText: 'Count'), ), ``` 3. 创建一个减按钮，当用户点击时更新计数值。你可以提供一个` onPressed`回调函数，这里假设`incrementCounter`是你已经有的增加计数的方法，那么减操作通常是`decrementCounter`。 ```dart minusButton = IconButton( icon: Icon(Icons.remove), onPressed: () { decrementCounter(); // 调用你的减操作方法 }, ); ``` 4. 把减按钮添加到布局中，比如`Column`、`Row`或者其他容器里，保持计数器和减号在一起。 5. 为了使减操作生效，你需要在`decrementCounter`方法中处理计数器的实际更新，例如： ```dart void decrementCounter() { int currentCount = int.parse(_counterController.text); // 获取当前计数值 if (currentCount > 0) { // 防止负数 setState(() { _counterController.text = String(currentCount - 1); }); } } ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值