Flutter Inkwell,RaisedButton去除水波纹的点击效果

最新推荐文章于 2023-07-06 11:38:00 发布

gnifeifeiing

最新推荐文章于 2023-07-06 11:38:00 发布

阅读量5.4k

点赞数 1

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq1377399077/article/details/109569408

版权

Flutter 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在Flutter中去除InkWell和RaisedButton组件的点击视觉效果，包括splash和高亮效果。通过设置相关属性为透明，并调整按钮的海拔属性，可以完全消除点击时的视觉反馈。

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

InkWell 、RaisedButton 等组件自带 splashColor 属性和 highlightColor 属性.将这两个属性设置为透明即可去除点击的效果.

InkWell(
	onTap: () {},
	child: Text('InkWell 组件'),
    highlightColor: Colors.transparent, // 透明色
    splashColor: Colors.transparent, // 透明色
),

但是RaisedButton即使设置了 splashColor 属性和 highlightColor 属性，点击时看着还是有效果,我们看两个跟卡片有关的属性,elevation和highlightElevation,看一下源码:

  /// The [button]'s elevation when it is enabled and has not been pressed.
  ///
  /// Returns the button's [MaterialButton.elevation] if it is non-null.
  ///
  /// If button is a [FlatButton] then elevation is 0.0, otherwise it is 2.0.
  double getElevation(MaterialButton button) {
    if (button.elevation != null)
      return button.elevation;
    if (button is FlatButton)
      return 0.0;
    return 2.0;
  }

  /// The [button]'s elevation when it is enabled and has been pressed.
  ///
  /// Returns the button's [MaterialButton.highlightElevation] if it is non-null.
  ///
  /// If button is a [FlatButton] or an [OutlineButton] then the highlight
  /// elevation is 0.0, otherwise the highlight elevation is 8.0.
  double getHighlightElevation(MaterialButton button) {
    if (button.highlightElevation != null)
      return button.highlightElevation;
    if (button is FlatButton)
      return 0.0;
    if (button is OutlineButton)
      return 0.0;
    return 8.0;
  }

源码中透露了如果button是FlatButton,则海拔是0,否则默认为2.0.突出海拔默认为8.
所以RaiseButton去除点击效果代码是:

RaisedButton(
	onPressed: () {},
    child: Text('按钮'),
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    highlightElevation: 0, 
    elevation: 0, 
),