如果比较熟悉材料设计(Material Design)的话,会发现里面有很多酷炫的效果,包括点击控件时,从手指的点击处向外扩散的水波效果。
Flutter也默认为我们的APP开发提供了材料设计的视图,但是会发现水波的展示有一些问题,特别是文本输入框TextField
上面使用时。
下面是我遇到的问题截图:

当来回切换两个输入框时,发现有时输入框背后的水波扩散完后没有消失,导致如图的展示异常。
这是Flutter目前的一个Bug,如果你也遇到这种情况的话,有一种解决方式就是在这个输入框上禁用水波效果。
下面我们就来介绍如何禁用控件的水波效果:
创建两个类,进行主题(Theme)的自定义:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| import 'package:flutter/material.dart';
class NoSplashFactory extends InteractiveInkFeatureFactory { const NoSplashFactory();
@override InteractiveInkFeature create( {MaterialInkController controller, RenderBox referenceBox, Offset position, Color color, TextDirection textDirection, bool containedInkWell = false, rectCallback, BorderRadius borderRadius, ShapeBorder customBorder, double radius, onRemoved}) { return new NoSplash( controller: controller, referenceBox: referenceBox, ); } }
class NoSplash extends InteractiveInkFeature { NoSplash({ @required MaterialInkController controller, @required RenderBox referenceBox, }) : assert(controller != null), assert(referenceBox != null), super( controller: controller, referenceBox: referenceBox, );
@override void paintFeature(Canvas canvas, Matrix4 transform) {} }
|
在需要禁用水波效果的控件上使用:
1 2 3 4 5 6 7 8
| ... child: Theme( data: ThemeData(splashFactory: const NoSplashFactory()), child: TextField( ... ), ), ...
|
这也许仅是Flutter目前版本(1.2.1)的一个Bug,也许将来Flutter团队会修复这个问题。但是本篇文章也为我们自定义主题(Theme)提供了一种思路。
本文原创地址为:https://www.examplecode.cn/2019/03/28/flutter-disable-ripple/
转载请注明出处。
我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!