《Flutter 控件大全》第八十二：ShaderMask

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

ShaderMask可以让我们将Shader用于任何一个控件上，比如在Text上使用渐变就可以使用ShaderMask来实现：

ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          colors: <Color>[Colors.yellow, Colors.deepOrange],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Text('老孟，一枚有态度的程序员',style: TextStyle(fontSize: 30),),
    )

效果：

shaderCallback 需要返回一个Shader对象，可以通过渐变相关类直接生成Shader：

RadialGradient(...).createShader(rect)

blendMode属性是融合方式，child是目标图像(dst),Shader是源图像(src)，融合方式介绍：

• 英文官方介绍
• 中文 不错的翻译

查看专栏详情 立即解锁全部专栏