如何在Flutter中禁用Widget默认的Splash/Ripple/Ink效果？

刚好经常碰到开发者问这个问题，尤其是用TextField的时候，默认的水波纹确实有点违和，下面分不同场景给你靠谱的解决方案：

一、针对TextField组件 #

TextField的水波纹其实来自它内部的Material容器，最简单的方式是用局部Theme覆盖，只让这个TextField失去波纹效果，不会影响其他组件：

Theme(
  data: Theme.of(context).copyWith(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    hoverColor: Colors.transparent,
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: "无波纹的输入框",
      border: OutlineInputBorder(),
    ),
  ),
)

要是你觉得设置三个颜色麻烦，也可以直接指定splashFactory: NoSplash.splashFactory，这是Flutter 2.0+提供的更直接的关闭波纹的方式：

Theme(
  data: Theme.of(context).copyWith(
    splashFactory: NoSplash.splashFactory,
  ),
  child: TextField(/* ... */),
)

二、针对带点击效果的组件（InkWell、ElevatedButton、ListTile等） #

这类组件大多自带波纹配置，可以直接在组件属性里关闭：

• InkWell：直接设置透明的波纹和高亮色

InkWell(
  splashColor: Colors.transparent,
  highlightColor: Colors.transparent,
  onTap: () => print("点击无波纹"),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text("无波纹点击区域"),
  ),
)

• ElevatedButton/TextButton/OutlinedButton：用NoSplash.splashFactory关闭波纹

ElevatedButton(
  splashFactory: NoSplash.splashFactory,
  onPressed: () => print("按钮无波纹"),
  child: Text("无波纹按钮"),
)

• ListTile：同样可以用splashFactory属性直接关闭

ListTile(
  splashFactory: NoSplash.splashFactory,
  onTap: () => print("列表项无波纹"),
  title: Text("无波纹列表项"),
)

三、全局禁用所有水波纹 #

如果你的整个App都不需要水波纹效果，可以直接在MaterialApp的主题里全局配置：

MaterialApp(
  theme: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
    splashFactory: NoSplash.splashFactory,
  ),
  home: YourHomeScreen(),
)

小提醒 #

• 用NoSplash.splashFactory比设置透明颜色更高效，因为它直接跳过了波纹的绘制逻辑，而透明颜色只是让波纹看不见，底层还是会执行绘制操作。
• 有些组件的波纹可能来自父级的Material组件，这时候局部Theme覆盖是最稳妥的方式，不会意外影响其他组件。

内容的提问来源于stack exchange，提问作者xip