Flutter：如何让ColorFiltered同时置灰禁用状态的图片与Text组件？

这个问题我太熟悉了！你遇到的情况是因为ColorFiltered的饱和度滤镜对纯色文本几乎不起作用——Text组件的文本是直接绘制的纯色，BlendMode.saturation主要是调整有色彩层次的内容（比如图片）的饱和度，对单一颜色的文本来说，调整后视觉上几乎没变化。下面给你两种实用的解决方案，能同时搞定图片和Text的置灰需求：

方案一：组合DefaultTextStyle与ColorFiltered（适配大多数场景） #

这个方案用DefaultTextStyle强制覆盖子组件中所有Text的颜色为灰色，同时保留ColorFiltered处理图片等带色彩层次的组件，兼顾了灵活性和效果。

class DisableWidget extends StatelessWidget {
  final Widget child;
  final bool disable;

  const DisableWidget({
    Key? key,
    required this.child,
    this.disable = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!disable) return child;

    return AbsorbPointer(
      absorbing: true,
      ignoringSemantics: true,
      child: DefaultTextStyle(
        // 选择适合你UI风格的灰色调
        style: TextStyle(color: Colors.grey[600]),
        // 确保所有子Text都继承这个样式（除非Text显式设置了color）
        child: ColorFiltered(
          colorFilter: ColorFilter.mode(
            Colors.grey,
            BlendMode.saturation,
          ),
          child: child,
        ),
      ),
    );
  }
}

补充说明： #

如果你的Text组件是显式使用Theme颜色（比如color: Theme.of(context).primaryColor），可以把DefaultTextStyle换成Theme组件，统一覆盖文本主题颜色：

Theme(
  data: Theme.of(context).copyWith(
    textTheme: Theme.of(context).textTheme.apply(
          bodyColor: Colors.grey[600],
          displayColor: Colors.grey[600],
        ),
  ),
  child: ColorFiltered(...),
)

方案二：使用ShaderMask（彻底统一置灰所有组件） #

如果你需要不管子组件是什么类型（包括自定义组件、带复杂颜色的Text）都统一置灰，ShaderMask是更彻底的方案。它通过给整个子组件覆盖一层灰色Shader，实现全局置灰效果。

class DisableWidget extends StatelessWidget {
  final Widget child;
  final bool disable;

  const DisableWidget({
    Key? key,
    required this.child,
    this.disable = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    if (!disable) return child;

    return AbsorbPointer(
      absorbing: true,
      ignoringSemantics: true,
      child: ShaderMask(
        shaderCallback: (bounds) => LinearGradient(
          colors: const [Colors.grey, Colors.grey],
        ).createShader(bounds),
        // 用color混合模式让Shader与子组件颜色融合
        blendMode: BlendMode.color,
        child: child,
      ),
    );
  }
}

方案对比： #

• 方案一：更灵活，能分别控制Text颜色和图片滤镜，适合Text大多继承默认样式的场景。
• 方案二：无需区分子组件，所有元素都会被统一置灰，适合需要强一致性的场景。

内容的提问来源于stack exchange，提问作者e-j5