Flutter：带FAB的BottomAppBar边框无法适配shapeNotch问题求助

出现这个问题的核心原因是：如果直接给BottomAppBar外层的容器（比如Padding、Container）加边框，容器无法识别BottomAppBar的缺口形状，只会绘制矩形边框；或者自定义BottomAppBar的shape没有把边框逻辑和缺口路径结合起来。

以下是两种可行的解决思路：

思路一：自定义带边框的NotchedShape #

创建一个自定义的ShapeBorder，同时处理BottomAppBar的圆角、缺口和边框绘制，让边框完全贴合缺口轮廓。

示例代码：

class NotchedBottomAppBarBorder extends ShapeBorder {
  final BorderSide side;
  final BorderRadiusGeometry borderRadius;
  final double notchMargin;

  NotchedBottomAppBarBorder({
    required this.side,
    required this.borderRadius,
    this.notchMargin = 8.0,
  });

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);

  @override
  Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
    return getOuterPath(rect, textDirection: textDirection)
        .shift(Offset(-side.width, -side.width));
  }

  @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    // 解析圆角矩形
    final RRect rRect = borderRadius.resolve(textDirection).toRRect(rect);
    // FAB的中心位置（对应centerDocked布局）
    final fabCenter = Offset(rect.center.dx, rect.top - notchMargin);
    // FAB半径（fabSize=56时，半径为28）
    final fabRadius = 28.0;

    // 构建包含缺口的完整路径
    final path = Path()
      ..addRRect(rRect)
      ..moveTo(fabCenter.dx - fabRadius - notchMargin, rect.top)
      ..arcToPoint(
        Offset(fabCenter.dx + fabRadius + notchMargin, rect.top),
        radius: Radius.circular(fabRadius + notchMargin),
        clockwise: false,
      );

    return path;
  }

  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..color = side.color
      ..strokeWidth = side.width;

    canvas.drawPath(getOuterPath(rect, textDirection: textDirection), paint);
  }

  @override
  ShapeBorder scale(double t) {
    return NotchedBottomAppBarBorder(
      side: side.scale(t),
      borderRadius: borderRadius * t,
      notchMargin: notchMargin * t,
    );
  }
}

然后在你的CustomBottomAppBar内部（或者直接用原生BottomAppBar）使用这个自定义Border：

BottomAppBar(
  shape: NotchedBottomAppBarBorder(
    side: const BorderSide(color: Colors.grey, width: 1.0),
    borderRadius: BorderRadius.circular(20.0),
    notchMargin: 8.0,
  ),
  notchMargin: 8.0,
  // 其他属性：颜色、子组件等
)

思路二：修正CustomBottomAppBar的实现逻辑 #

如果你的CustomBottomAppBar是通过外层包裹Container来加边框，立刻去掉这个逻辑——容器的边框无法适配BottomAppBar的缺口。

改为在CustomBottomAppBar内部，将边框绘制和BottomAppBar的shape路径绑定：

1. 确保CustomBottomAppBar的shape属性使用了正确的NotchedShape（比如CircularNotchedRectangle）。
2. 通过自定义ShapeBorder的方式，把边框整合到shape中（参考思路一），而不是在外层容器加边框。

额外注意事项 #

• 确保Scaffold的floatingActionButtonLocation设置为FloatingActionButtonLocation.centerDocked（或对应布局的位置），让FAB和BottomAppBar的缺口完全对齐，否则边框缺口会和FAB错位。
• 调整fabRadius值时，要和你的FAB实际尺寸对应（fabSize的一半）。

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