Flutter BackdropFilter

BackdropFilter 是 Flutter 中实现毛玻璃（Glass Morphism） 、背景模糊、色彩滤镜等高级视觉效果的核心组件。它的作用是对其后方（下层）已渲染的所有内容应用滤镜，再绘制自身的子组件。

一、核心属性

dart

const BackdropFilter({
  Key? key,
  required ImageFilter filter, // 滤镜（必选）
  BlendMode blendMode = BlendMode.srcOver, // 混合模式
  Widget? child, // 前景子组件（通常是半透明容器）
})

• filter (必选)：定义滤镜效果。最常用 ImageFilter.blur 实现高斯模糊。
• child ：前景部件。必须设置 ，通常是一个带极低透明度 的 Container，否则滤镜效果不生效。
• blendMode ：滤镜结果与背景的混合方式，默认 srcOver 即可。

二、基础用法（毛玻璃 / 高斯模糊）

关键要点 ：必须配合 Stack 使用，并必须用 ClipRRect 或 ClipRect 限制模糊范围，否则会模糊整个屏幕。

dart

import 'package:flutter/material.dart';
import 'dart:ui'; // 必须导入，使用 ImageFilter

class BackdropFilterDemo extends StatelessWidget {
  const BackdropFilterDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 1. 底层背景（被模糊的对象）
          Image.network(
            'https://picsum.photos/1080/1920',
            fit: BoxFit.cover,
          ),
          // 2. 模糊区域：必须用 ClipRRect 限定圆角范围
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20), // 与你之前问的 borderRadius 结合
              child: BackdropFilter(
                // 模糊滤镜：sigmaX/Y 越大越模糊
                filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                // 关键：子组件必须有透明度，否则看不到模糊效果
                child: Container(
                  width: 300,
                  height: 200,
                  // 半透明颜色，增强毛玻璃质感
                  color: Colors.white.withOpacity(0.1),
                  alignment: Alignment.center,
                  child: const Text(
                    '毛玻璃效果',
                    style: TextStyle(fontSize: 24, color: Colors.white),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

三、与 ClipRRect 结合（你之前的问题）

将 BackdropFilter 作为 ClipRRect 的直接子组件 ，即可实现带圆角的毛玻璃，这是最常见的组合：

dart

ClipRRect(
  borderRadius: BorderRadius.circular(20), // 控制模糊区域的圆角
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Container(
      width: 300,
      height: 200,
      color: Colors.white.withOpacity(0.1),
    ),
  ),
)

四、其他滤镜效果

除了模糊，ImageFilter 还提供其他滤镜：

• 位移 ：ImageFilter.offset(5, 5)
• 缩放 ：ImageFilter.scale(1.5, 1.5)
• 旋转 ：ImageFilter.rotate(pi/4)
• 矩阵变换 ：ImageFilter.matrix(Matrix4.identity().storage)

五、重要注意事项（避坑）

1. 必须有 child ：BackdropFilter 的 child 不能为 null，且通常需要半透明颜色，否则滤镜不生效。
2. 必须裁剪 ：不加 ClipRRect/ClipRect 会导致全屏模糊。
3. 性能开销大 ：模糊是昂贵的操作Flutter。
   • 避免在 ListView 等滚动组件中大量使用。
   • 模糊值（sigma）不要过大（建议 5~15）。
   • 静态背景可预生成模糊图片替代。
4. 与 Opacity 冲突 ：父组件有 Opacity 时，可能导致显示异常，需调整 blendMode 为 BlendMode.srcFlutter。

六、与 ImageFiltered 的区别

• BackdropFilter ：模糊背景（后面的内容）。
• ImageFiltered ：模糊自身（子组件内容）。

总结

BackdropFilter + ImageFilter.blur + ClipRRect 是 Flutter 实现高级毛玻璃效果 的黄金组合。核心就是控制模糊范围、设置半透明前景、注意性能优化。