你是否遇到過在 Flutter 中，點擊按鈕或者底部導航欄的時候，出現下面的情況

有時候我們并不需要這種水波紋效果，該怎樣取消呢？下面提供兩種方式，一種全局設置，一種局部設置，大家根據自己的業(yè)務情況選擇即可。

一：全局去除設置

找到 MaterialApp 組件，設置其 theme 屬性如下

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1016" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
splashColor: Colors.transparent, // 點擊時的高亮效果設置為透明
highlightColor: Colors.transparent, // 長按時的擴散效果設置為透明
),
);
} </pre>

這樣在任何地方點擊按鈕或者底部導航欄，都不會再有水波紋效果了，效果圖如下

[圖片上傳失敗...(image-e84a61-1684585423911)]

二：局部去除設置

全局設置是一棍子解決問題，如果你需要某個組件去除水波紋效果的話，這就要用到局部設置了，

局部設置需要要求組件自帶 splashColor 屬性和 highlightColor 屬性，比如 InkWell 、RaisedButton 等組件

局部修改的方式和全局修改的方式一樣，都是修改 splashColor 屬性和 highlightColor 屬性，如下代碼所示

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1023" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">InkWell(
onTap: () {},
child: Text('InkWell 組件', style: TextStyle(fontSize: 25)),
highlightColor: Colors.transparent, // 透明色
splashColor: Colors.transparent, // 透明色
), </pre>

需要說明的是，如果全局設置了去除水波紋效果，但是在局部中又設置了組件的 splashColor 屬性和 highlightColor 屬性，局部的會覆蓋全局的。

另外，像 RaisedButton 類型的組件比較特殊，即使你設置了 splashColor 屬性和 highlightColor 屬性，點擊時看著好像還是有水波紋效果，那是因為點擊 RaisedButton 時還有陰影效果的屬性在控制著，所以最終代碼如下

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n1026" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">RaisedButton(
onPressed: () {},
child: Text('按鈕'),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
highlightElevation: 0, // 控制按鈕下方陰影的大小，默認值為 8
elevation: 0, // 凸起按鈕下方陰影的大小，默認值為 2
), </pre>

也許還有其它的解決方式，如果你還有其它更好的，歡迎在評論區(qū)評論。

關于 如何去除 Flutter 中點擊按鈕、底部導航欄的水波紋效果，就簡單說到這里，如果幫到了你，希望大家可以一鍵三連哦。

你的問題得到解決了嗎？歡迎在評論區(qū)留言。

贈人玫瑰，手有余香，如果覺得文章不錯，希望可以給個一鍵三連，感謝。