Flutter | ShaderMask - 给你的Widget加上色彩

在前段时间写代码的时候，碰到个需求：给这个文字加上渐变色！

当时我内心只有一张图：

先看一下效果图：

嘿，你别说还挺好看。

话很少说，了解一下是如何实现的吧。

请出今天的主角：ShaderMask。

官方介绍

按照惯例，咱们仍是先来看一下官方的介绍：

A widget that applies a mask generated by a Shader to its child.

一个小部件，将由着色器生成的遮罩应用于其子级。

官方示例

知道了ShaderMask的做用以后咱们就接着来看一下官方的示例：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return RadialGradient(
      center: Alignment.topLeft,
      radius: 1.0,
      colors: <Color>[Colors.yellow, Colors.deepOrange.shade900],
      tileMode: TileMode.mirror,
    ).createShader(bounds);
  },
  child: const Text('I’m burning the memories'),
)
复制代码

然而，当咱们把这段代码复制到编辑器，运行后：

什么也没有发生，由于咱们的字是黑色的！

改一下，改为白色：

这就是官方demo的例子，也是 ShaderMask 最基础的用法，下面就来讲一下进阶的用法。

会动的渐变

先看一下效果：

其实这个和 ShaderMask 自己没有什么关系了，是「着色器」和「动画」的合做后，最后遮罩在一个 Widget 上所达到了如今的效果。

关键代码以下：

shaderCallback: (Rect bounds) {
  return LinearGradient(colors: _colors, stops: [
    0 + _gradientValue * 0.2,
    _gradientValue * 0.8,
    1 - _gradientValue * 0.3
  ]).createShader(bounds);
}
复制代码

最重要的是 stops 参数，他规定了渐变的颜色所在区域，值从0到1.

这样再加上动画，就完成了一个会动的渐变色这样的效果。

万物皆可 ShaderMask

前面我只是用了一个文原本演示 ShaderMask 的基础用法，然而 ShaderMask 的 child 能够是任意 Widget。

好比：

结语

ShaderMask 能够很方便的为咱们添加颜色，可是咱们须要注意其中一点：

shader 是处于下层的，child 处于上层，也就是说，是咱们的 child 盖住了 shader。

咱们能够经过 blendMode 来控制他俩重叠部分的效果，以下：

图来自张风捷特烈