Flutter CustomPainter自定义底部导航栏左右直角修改问题

问题原因 #

原有CustomPainter路径绘制逻辑存在坐标偏差：

• 路径初始起点为(0, 20)，左上角未对齐画布顶点，天然存在高度20的弧形过渡
• 右上角通过二次贝塞尔曲线绘制时，终点落在(屏幕宽度, 20)位置，未对齐右上角顶点，仅修改起点坐标无法修正右侧弧度
• 路径最终闭合时回到(0,20)点，左侧边框无法形成垂直直角边

修正代码 #

直接替换BNBCustomPainter类中的路径绘制逻辑即可，保留原有中间悬浮按钮的凹陷效果，同时将左右边角改为直角：

class BNBCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = secondarycolor
      ..style = PaintingStyle.fill;

    Path path = Path();
    // 起点直接对齐左上角直角顶点
    path.moveTo(0, 0);
    // 保留原有左侧到中间悬浮按钮位的曲线过渡
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
    path.arcToPoint(
      Offset(size.width * 0.60, 20),
      radius: Radius.circular(20.0),
      clockwise: false
    );
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    // 贝塞尔曲线终点对齐右上角直角顶点，消除右侧弧度
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 0);
    // 绘制右侧垂直边
    path.lineTo(size.width, size.height);
    // 绘制底部水平边
    path.lineTo(0, size.height);
    // 自动闭合路径，绘制左侧垂直边回到起点
    path.close();

    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

异常排查 #

如果修改后仍存在边角弧度，检查以下配置：

• 外层Container是否设置了圆角装饰，如有请移除borderRadius相关配置
• 打开Stack组件的clipBehavior: Clip.hardEdge配置，避免子组件绘制内容被系统默认裁切为圆角
• 确认Scaffold主题中没有全局给bottomNavigationBar设置默认形状样式

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