如果比较熟悉材料设计(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）提供了一种思路。
爆款好课来袭，磊哥邀你一起学习!
AI充电季-Google开发专家带你系统掌握AI知识
整个课程以理论加实战为核心，从基础原理、代码案例、模型设计、训练流程、模型评估、参数调优、服务部署铺开，带你手把手入门深度学习，一次性系统掌握实践 AI 的所有知识和流程。
本课程共计665分钟，58节，如果每天学习1小时，预计学习12天。
零基础搞定Python数据分析与挖掘
基于灵巧的Python代码，可大幅度提高工作效率。轻松实现数据分析与挖掘的应用，并独立完成数据分析项目。
本课程已更新1183分钟，82节，如果每天学习1小时，预计学习20天。
本文原创地址为：https://www.examplecode.cn/2019/03/28/flutter-disable-ripple/
转载请注明出处。
我的博客中关于Flutter的所有文章可以点击这里找到，欢迎关注！
