先上效果图

上面是对一张带有透明背景的png图片做颜色渐变,原图如下:

直接上代码:

ShaderMask(
    child: Image.asset('images/spring.png'),
    shaderCallback: (rect) {
        return LinearGradient(
            colors: [
              Colors.greenAccent,
              Colors.deepPurpleAccent,
              Colors.redAccent,
            ],
            stops: [0, _controller.value, 1],
        ).createShader(rect);
    },
    blendMode: BlendMode.srcATop,
)
复制代码

核心是blendMode属性,用来确定shader和child之间重叠部分的显示效果。其中child是处于上层,shader是属于下层,BlendMode的各种属性的效果如下:

上图链接

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐