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 來控制他倆重疊部分的效果，以下：

圖來自張風捷特烈