Flutter 全局去除水波纹

1、新建名为NoSplashFactory 的class,将如下代码拷入:

import 'package:flutter/material.dart';

/*
 * 去除水波纹
*/
class NoSplashFactory extends InteractiveInkFeatureFactory {
  const NoSplashFactory();

  InteractiveInkFeature create({
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
    @required Offset position,
    @required Color color,
    TextDirection textDirection,
    bool containedInkWell: false,
    RectCallback rectCallback,
    BorderRadius borderRadius,
    ShapeBorder customBorder,
    double radius,
    VoidCallback onRemoved,
  }) {
    return new NoSplash(
      controller: controller,
      referenceBox: referenceBox,
      color: color,
      onRemoved: onRemoved,
    );
  }
}

class NoSplash extends InteractiveInkFeature {
  NoSplash({
    @required MaterialInkController controller,
    @required RenderBox referenceBox,
    Color color,
    VoidCallback onRemoved,
  }) : assert(controller != null),
        assert(referenceBox != null),
        super(controller: controller, referenceBox: referenceBox, onRemoved: onRemoved) {
    controller.addInkFeature(this);
  }
  @override
  void paintFeature(Canvas canvas, Matrix4 transform) { }
}

2、在MyApp class中找到 MaterialApp 下的 ThemeData 加入以下内容
注:const NoSplashFactory()需要导包刚刚新建的class

highlightColor: Colors.transparent, 
splashFactory: const NoSplashFactory(), 

在这里插入图片描述

### 如何在 Flutter 中禁用 TabBar 的水波纹效果 在 Flutter 中,默认情况下 `TabBar` 会有点击时产生的水波纹效果(Ink Splash Effect)。如果希望禁用这种效果,可以通过设置 `inkWellFactory` 属性来实现。具体来说,可以创建一个自定义的 `MaterialStatesProperty<InteractionFeedback?>` 并将其传递给 `TabBar` 的 `interactionPropertiesBuilder` 参数[^4]。 以下是具体的代码示例: ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: PreferredSize( preferredSize: Size.fromHeight(kToolbarHeight), child: TabBar( labelColor: Colors.black, unselectedLabelColor: Colors.grey, indicatorColor: Colors.red, tabs: [ Tab(text: "Tab 1"), Tab(text: "Tab 2"), Tab(text: "Tab 3"), ], interactionPropertiesBuilder: (context, states) => MaterialStatePropertyAll(null), // 禁用水波纹效果 ), ), title: Text('Disable Ink Splash Example'), ), body: TabBarView( children: [ Center(child: Text("Content of Tab 1")), Center(child: Text("Content of Tab 2")), Center(child: Text("Content of Tab 3")), ], ), ), ), ); } } ``` 上述代码通过将 `interactionPropertiesBuilder` 设置为返回 `null` 来移除默认的水波纹效果。这种方式适用于较新的 Flutter 版本。对于旧版本,则可能需要通过包裹 `IgnorePointer` 或者调整主题中的 `splashFactory` 实现类似的效果。 另外需要注意的是,在某些场景下,可能会遇到其他副作用,比如滑块移动过程中文字抖动等问题。这通常是因为布局重绘引起的,建议优化组件结构或者使用 `AutomaticKeepAliveClientMixin` 防止频繁重建页面[^2]。 #### 注意事项 - 如果项目中使用的 Flutter SDK 较低,可能不支持 `interactionPropertiesBuilder` 参数,此时需升级到最新稳定版。 - 对于更复杂的定制需求,还可以考虑完全替换掉原生 `TabBar`,改用手势检测器配合手动管理选中状态的方式构建类似的交互逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值