如何在Flutter中创建带弧形凹槽的BottomNavigationBar

一、核心实现思路 #

你要的弧形凹槽比CircularNotchedRectangle的圆形缺口更平缓，二次贝塞尔曲线（quadraticBezier）的控制点难以调出理想弧度，建议用**三次贝塞尔曲线（cubicTo）**绘制更顺滑的弧形。无需单独用CustomPaint包裹整个导航栏，直接自定义NotchedShape并赋值给BottomNavigationBar的shape属性，更贴合原生组件逻辑。

二、代码示例 #

自定义NotchedShape实现弧形凹槽 #

class ArcNotchedShape extends NotchedShape {
  final double notchRadius;

  ArcNotchedShape({this.notchRadius = 30.0});

  @override
  Path getOuterPath(Rect host, Rect? guest) {
    if (guest == null) return Path()..addRect(host);

    // 计算凹槽的左右起点
    final double left = guest.left - notchRadius;
    final double right = guest.right + notchRadius;
    final double bottom = host.bottom;

    return Path()
      ..moveTo(host.left, bottom)
      // 绘制左侧直线到凹槽起点
      ..lineTo(left, bottom)
      // 三次贝塞尔曲线绘制弧形凹槽
      ..cubicTo(
        left, bottom - notchRadius * 0.6,
        right, bottom - notchRadius * 0.6,
        right, bottom,
      )
      // 绘制右侧直线到导航栏末端
      ..lineTo(host.right, bottom)
      // 闭合路径
      ..lineTo(host.right, host.top)
      ..lineTo(host.left, host.top)
      ..close();
  }
}

在BottomNavigationBar中使用 #

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    shape: ArcNotchedShape(notchRadius: 35), // 自定义形状，可调整半径
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: '搜索'),
      BottomNavigationBarItem(icon: Icon(Icons.add), label: '添加'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
    ],
  ),
)

若要更贴合预期弧度，调整cubicTo的两个控制点y值即可——数值越小，弧度向上凸起越明显。

三、CustomPainter与Canvas学习资源 #

• Flutter官方文档：CustomPainter类说明，详细覆盖Canvas绘制的基础API（路径、画笔、贝塞尔曲线等）
• Flutter中文网《Flutter Canvas 详解》：系统讲解Canvas核心概念与实战技巧
• 实战视频：YouTube上的"Flutter CustomPaint Tutorial"系列，通过实例快速掌握复杂图形绘制逻辑

四、可用插件推荐 #

如果不想自己写绘制逻辑，可尝试以下插件：

• curved_navigation_bar：支持自定义导航栏曲线，通过调整curve参数实现类似弧形凹槽
• flutter_bottom_navigation：提供多种预定义导航栏形状，也支持自定义样式扩展

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