如果比较熟悉材料设计 (Material Design) 的话, 会发现里面有很多酷炫的效果, 包括点击控件时, 从手指的点击处向外扩散的水波效果.
Flutter 也默认为我们的 App 开发提供了材料设计的视图, 但是会发现水波的展示有一些问题, 特别是文本输入框 TextField 上面使用时.
下面是我遇到的问题截图:
-w370
当来回切换两个输入框时, 发现有时输入框背后的水波扩散完后没有消失, 导致如图的展示异常.
这是 Flutter 目前的一个 Bug, 如果你也遇到这种情况的话, 有一种解决方式就是在这个输入框上禁用水波效果.
下面我们就来介绍如何禁用控件的水波效果:
创建两个类, 进行主题 (Theme) 的自定义:
- 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) {}
- }
在需要禁用水波效果的控件上使用:
- ...
- child: Theme(
- data: ThemeData(splashFactory: const NoSplashFactory()),
- child: TextField(
- ...
- ),
- ),
- ...
这也许仅是 Flutter 目前版本 (1.2.1) 的一个 Bug, 也许将来 Flutter 团队会修复这个问题. 但是本篇文章也为我们自定义主题 (Theme) 提供了一种思路.
欢迎大家留言讨论~
来源: http://www.jianshu.com/p/27848f331f8d