最近在开发中遇到个问题,需要使用毛玻璃效果,实现毛玻璃效果需要使用到BackdropFilter控件。
1、介绍Flutter毛玻璃控件
BackdropFilter可以用于对背景图片进行高斯模糊设置或者矩阵变换,
BackdropFilter 的构造如下:
const BackdropFilter({
super.key,
required this.filter,
super.child,
this.blendMode = BlendMode.srcOver,
});
2、设置高斯模糊,sigmaX和sigmaY的值越大高斯模糊效果越明显。
//构造一个设置高斯模糊的ImageFilter,sigmaX,sigmaY用来控制
//模糊度,取值范围是0-10
ImageFilter.blur({double sigmaX: 0.0, double sigmaY: 0.0 })
设置矩阵变换
ImageFilter.matrix(
Float64List matrix4,
{ FilterQuality filterQuality: FilterQuality.low })
3、但是在Stack组件中,使用BackdropFilter控件会将整个父Widget都进行毛玻璃效果。
需要使用ClipRect控件包裹BackdropFilter控件进行使用,可以只作用于子控件,否则会将父控件也进行毛玻璃效果
4、出现原因
这是因为 BackdropFilter 会应用于其内部所有子组件的绘制区域,并且没有限制。如果不使用 ClipRRect 对子组件进行裁剪,BackdropFilter 会将模糊效果扩散到整个父组件。