Flutter禁用材料设计(Material Design)点击时的水波效果

如果比较熟悉材料设计(Material Design)的话,会发现里面有很多酷炫的效果,包括点击控件时,从手指的点击处向外扩散的水波效果。

Flutter也默认为我们的APP开发提供了材料设计的视图,但是会发现水波的展示有一些问题,特别是文本输入框TextField上面使用时。

下面是我遇到的问题截图:
-w370

当来回切换两个输入框时,发现有时输入框背后的水波扩散完后没有消失,导致如图的展示异常。

这是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)提供了一种思路。

我的博客中关于Flutter的所有文章可以点击这里找到,欢迎关注!

如果有问题可以留言,或者给我发邮件lloyd@examplecode.cn,期待我们共同学习与成长!

坚持原创技术分享,您的支持将鼓励我继续创作!