如何用Stack实现图片局部置灰并支持置灰层移动？

要实现可自由移动的局部灰度遮罩，核心思路是用Stack层叠原图和遮罩层，通过Positioned控制遮罩的位置与尺寸，同时用ColorFiltered给遮罩区域添加灰度滤镜，这样既保证遮罩能独立移动，又不会影响原图整体。

直接替换你代码里的红色块部分，改成带灰度滤镜的容器即可，完整代码如下：

Stack(
  children: [
    Image.asset('bla', fit: BoxFit.contain),
    Positioned(
      // 后续可通过修改这些参数或手势拖动来移动遮罩
      top: 50,
      left: 50,
      right: 50,
      bottom: 50,
      child: ColorFiltered(
        // 灰度转换矩阵，将彩色转为灰度
        colorFilter: const ColorFilter.matrix(<double>[
          0.2126, 0.7152, 0.0722, 0, 0,
          0.2126, 0.7152, 0.0722, 0, 0,
          0.2126, 0.7152, 0.0722, 0, 0,
          0,      0,      0,      1, 0,
        ]),
        child: Container(
          // 容器设为透明，只保留滤镜效果
          color: Colors.transparent,
        ),
      ),
    )
  ],
)

关键说明： #

• ColorFilter.matrix里的矩阵是标准的灰度转换公式，能让底层图片透过该区域时呈现灰度效果
• Positioned的top/left/right/bottom参数可以动态修改，搭配GestureDetector就能实现遮罩的拖动移动
• 容器设为透明是为了只保留滤镜的混合效果，不会额外添加颜色覆盖

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