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

Flutter筆記發表於2020-03-16

在前段時間寫程式碼的時候,碰到個需求:給這個文字加上漸變色!

當時我心裡只有一張圖:

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

先看一下效果圖:

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'),
)
複製程式碼

然而,當我們把這段程式碼複製到編輯器,執行後:

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

什麼也沒有發生,因為我們的字是黑色的!

改一下,改成白色:

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

這就是官方demo的例子,也是 ShaderMask 最基礎的用法,下面就來說一下進階的用法。

會動的漸變

先看一下效果:

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

其實這個和 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。

比如:

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

結語

ShaderMask 可以很方便的為我們新增顏色,但是我們需要注意其中一點:

shader 是處於下層的,child 處於上層,也就是說,是我們的 child 蓋住了 shader

我們可以通過 blendMode 來控制他倆重疊部分的效果,如下:

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

圖來自張風捷特烈

相關文章