码迷,mamicode.com
首页 > 其他好文 > 详细

Flutter Widgets 之 ShaderMask

时间:2020-03-01 00:56:44      阅读:97      评论:0      收藏:0      [点我收藏+]

标签:alignment   tst   介绍   英文   html   htm   die   font   mat   

技术图片

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),融合方式介绍:

更多相关阅读:

如果这篇文章有帮助到您,希望您来个“赞”并关注我的公众号,非常谢谢。

技术图片

Flutter Widgets 之 ShaderMask

标签:alignment   tst   介绍   英文   html   htm   die   font   mat   

原文地址:https://blog.51cto.com/11206976/2474559

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!