Flutter开发 毛玻璃控件BackdropFilter使用问

最近在开发中遇到个问题，需要使用毛玻璃效果，实现毛玻璃效果需要使用到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 会将模糊效果扩散到整个父组件。