flutter几个组件ColorFiltered、ShaderMask

ColorFiltered:
1、可以实现app整体变灰

runApp(
   ColorFiltered(
     colorFilter: ColorFilter.mode(Colors.white, BlendMode.color),
     child: MyApp(),
   ),
 );

BlendMode全面指南及其应用
Flutter的BlendMode类提供了多种混合模式,每种模式都有其特定的视觉效果:

clear:将目标图像设置为完全透明。
src:显示源图像,忽略目标图像。
dst:显示目标图像,忽略源图像。
srcOver:将源图像绘制在目标图像上方。
dstOver:将目标图像绘制在源图像上方。
srcIn:仅显示源图像和目标图像重叠的部分,以源图像的透明度为准。
dstIn:仅显示源图像和目标图像重叠的部分,以目标图像的透明度为准。
srcOut:仅显示源图像的非重叠部分。
dstOut:仅显示目标图像的非重叠部分。
srcATop:将源图像绘制在目标图像上方,但只在两者重叠的地方显示目标图像。
dstATop:将目标图像绘制在源图像上方,但只在两者重叠的地方显示源图像。
xor:显示源图像和目标图像的非重叠部分。
plus:将源图像和目标图像的颜色相加。
modulate:将源图像和目标图像的颜色相乘,结果更暗。
screen:将源图像和目标图像相互反转后相乘,结果更亮。
overlay、darken、lighten、colorDodge、colorBurn、hardLight、softLight、difference、exclusion、multiply、等:这些模式通过不同的算法混合源图像和目标图像,创造出丰富的效果,适用于创造阴影、光照效果或调整色彩饱和度等场景。

应用场景和实际用途

调整图像色彩与对比度:使用multiply、screen等模式可以调整图像的明暗和对比度,适用于图像编辑应用。
创建艺术效果:overlay、softLight等模式可以创造类似于照片编辑软件中的艺术效果,适用于设计创意应用。
实现界面动态效果:结合动画,使用darken、lighten等模式可以实现按钮按下的视觉反馈或其他交互效果。
图形和背景混合:srcIn、dstOut等模式可以用于实现复杂的图形和背景的混合效果,增强界面的视觉层次。

ShaderMask:给你的Widget加上色彩

1、ShaderMask 可以很方便的为我们添加颜色,但是我们需要注意其中一点:

shader 是处于下层的,child 处于上层,也就是说,是我们的 child 盖住了 shader。

我们可以通过 blendMode 来控制他俩重叠部分的效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。