Flutter中使用ClipRect时如何添加ImageFilter模糊效果

要实现初始全模糊、裁剪区域清晰的效果，核心思路是用叠层布局：底层放一张带模糊滤镜的完整图片，上层只显示裁剪出来的清晰区域，未被裁剪的部分就会透出底层的模糊效果。

直接修改你的代码结构，替换成下面的实现：

child: Container(
  height: height,
  width: width,
  decoration: BoxDecoration(
    color: Colors.transparent,
    border: Border.all(
      width: 2,
      color: _isSelected && _showAlternateContainer
          ? Colors.black
          : Colors.red,
    ),
  ),
  child: Stack(
    fit: StackFit.expand,
    children: [
      // 底层：全模糊的图片
      ImageFiltered(
        imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), // 模糊程度可自行调整
        child: Image.asset(
          image,
          width: width,
          height: height,
          fit: BoxFit.fill,
        ),
      ),
      // 上层：裁剪出的清晰区域
      ClipRect(
        clipBehavior: Clip.hardEdge,
        clipper: MyCustomClipper(
          clipLeft,
          clipTop,
          _showAlternateContainer ? width : clipWidth,
          _showAlternateContainer ? height : clipHeight,
        ),
        child: Image.asset(
          image,
          width: width,
          height: height,
          fit: BoxFit.fill,
        ),
      ),
    ],
  ),
),

关键说明： #

• 用Stack将两张图片叠放，StackFit.expand确保图片填满容器
• 底层通过ImageFiltered给图片添加模糊滤镜，sigmaX和sigmaY控制模糊强度，数值越大模糊效果越明显
• 上层保留你原有的ClipRect和自定义裁剪器，仅显示指定区域的清晰图片，覆盖在模糊层之上
• 初始时可将裁剪参数设为0（比如clipWidth=0、clipHeight=0），实现全模糊的初始状态；当裁剪参数变化时，清晰区域会同步更新

内容的提问来源于stack exchange，提问作者Harsh Rajpara