如何在CustomPainter中使用BackdropFilter？圆形边框消失问题求解

你的问题出在重复绘制BottomNavBar且模糊层覆盖了边框。当前代码中，BackdropFilter的子节点再次绘制了BottomNavBar，模糊效果会扩散周围像素，导致边框被模糊覆盖甚至消失。不需要将图片传入CustomPainter，只需调整Widget层级，让边框绘制在模糊背景的上方即可。

修改后的代码示例 #

Positioned(
  top: 200,
  bottom: 0,
  left: 0,
  right: 0,
  child: SizedBox(
    width: 339,
    height: 60,
    child: Stack(
      children: [
        // 1. 模糊背景层：仅负责提供模糊效果的背景
        BackdropFilter(
          filter: ui.ImageFilter.blur(sigmaX: 20, sigmaY: 20),
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.black12.withOpacity(0.1), // 配合模糊的半透明背景
          ),
        ),
        // 2. 边框绘制层：在模糊层上方，不受模糊影响
        CustomPaint(
          painter: BottomNavBar(),
          size: Size.infinite,
        ),
      ],
    ),
  ),
)

关键调整说明 #

1. 分层设计：用Stack将模糊背景和边框绘制分离，边框在最上层，完全不受模糊效果干扰，自然能清晰显示。
2. 移除重复绘制：删除原代码中BackdropFilter内部的CustomPaint(painter: BottomNavBar())，避免重复绘制导致的层级冲突。
3. 简化背景设置：模糊层只保留带半透明色的Container，不需要额外的CustomPaint，让BackdropFilter专注处理模糊效果。

配合BottomNavBar Painter的注意事项 #

确保你的BottomNavBar CustomPainter只负责绘制边框路径，不要包含背景填充逻辑（背景由模糊层的Container处理）：

class BottomNavBar extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final borderPaint = Paint()
      ..color = Colors.white // 边框颜色
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    // 这里是你的底部导航栏路径绘制逻辑（包含中间圆形缺口）
    final path = Path();
    // 示例路径逻辑（根据你的需求调整）
    path.moveTo(20, 0);
    path.lineTo(size.width / 2 - 30, 0);
    // 绘制中间圆形缺口的圆弧
    path.arcToPoint(
      Offset(size.width / 2 + 30, 0),
      radius: const Radius.circular(30),
      clockwise: false,
    );
    path.lineTo(size.width - 20, 0);
    path.lineTo(size.width - 20, size.height);
    path.lineTo(20, size.height);
    path.close();

    canvas.drawPath(path, borderPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

这样调整后，圆形周围的边框就能正常显示，同时保留你需要的模糊背景效果。

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