如何用Flutter CustomPaint调整底部栏FAB位置样式以匹配UI？

核心问题分析 #

你当前的arcToPoint参数未精准匹配UI设计的凹弧尺寸与位置，需要调整圆弧的坐标、半径及绘制方向。

调整方案 #

结合参考UI（底部导航栏中间带适配FAB的内凹圆弧），按以下逻辑修改路径绘制：

1. 锁定FAB中心位置：假设FAB宽度为fabWidth（比如56），内凹圆弧的中心应对齐底部导航栏垂直中线，即size.width / 2位置。
2. 对称绘制圆弧路径：从导航栏左侧平滑过渡到圆弧起点，绘制内凹弧后再衔接右侧边缘，保证弧度与UI一致。
3. 修正arcToPoint参数：调整半径和方向，确保内凹效果匹配设计。

示例代码：

class BottomNavPainter extends CustomPainter {
  final double fabWidth;
  final double navHeight;

  BottomNavPainter({required this.fabWidth, required this.navHeight});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    final path = Path();
    // 起点：左上角
    path.moveTo(0, 0);
    // 绘制左侧直线到圆弧起点
    final arcStartX = (size.width / 2) - (fabWidth / 2);
    path.lineTo(arcStartX, 0);
    // 绘制内凹圆弧
    path.arcToPoint(
      Offset((size.width / 2) + (fabWidth / 2), 0),
      radius: Radius.circular(20), // 按UI设计调整圆弧半径
      clockwise: false, // 逆时针绘制实现内凹
    );
    // 绘制右侧直线到右上角
    path.lineTo(size.width, 0);
    // 绘制底部边界
    path.lineTo(size.width, navHeight);
    path.lineTo(0, navHeight);
    // 闭合路径
    path.close();

    canvas.drawPath(path, paint);
  }

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

关键参数说明 #

• fabWidth：传入FAB实际宽度，确保圆弧宽度刚好适配FAB
• Radius.circular(20)：参考UI图中弧度较大，可根据实际设计调整半径数值
• clockwise: false：此参数是实现内凹的关键，设为true会变成外凸圆弧

额外优化 #

• 添加阴影效果，让导航栏与FAB衔接更自然：

  final paint = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.fill
    ..shadowColor = Colors.black12
    ..maskFilter = MaskFilter.blur(BlurStyle.normal, 4);
  

• 确保导航栏高度navHeight与FAB悬浮高度匹配，避免遮挡或间距异常

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