如何在Flutter中实现指定样式的顶部路径裁剪器

问题原因 #

• 现有代码绘制的是顶部向上凸起的弧形，和你需要的向下凹陷效果完全相反
• 硬编码的40px高度未做尺寸适配，不同设备下显示效果会出现变形

调整后代码 #

class CustomClipPath extends CustomClipper<Path> {
  // 凹陷的半径，可根据悬浮按钮尺寸调整
  final double indentRadius = 28;
  // 凹陷左右预留的边距，可自行调整
  final double padding = 12;

  @override
  Path getClip(Size size) {
    final path = Path();
    // 起点定位到左上角
    path.moveTo(0, 0);
    // 绘制到凹陷左侧起点
    path.lineTo(size.width / 2 - indentRadius - padding, 0);
    // 第一段贝塞尔曲线绘制凹陷左半弧
    path.quadraticBezierTo(
      size.width / 2 - indentRadius, 
      0, 
      size.width / 2 - indentRadius / 2, 
      indentRadius / 2
    );
    // 第二段贝塞尔曲线绘制凹陷底部弧
    path.quadraticBezierTo(
      size.width / 2, 
      indentRadius, 
      size.width / 2 + indentRadius / 2, 
      indentRadius / 2
    );
    // 第三段贝塞尔曲线接回顶部右侧
    path.quadraticBezierTo(
      size.width / 2 + indentRadius, 
      0, 
      size.width / 2 + indentRadius + padding, 
      0
    );
    // 绘制到右上角
    path.lineTo(size.width, 0);
    // 绘制到右下角
    path.lineTo(size.width, size.height);
    // 绘制到左下角
    path.lineTo(0, size.height);
    // 闭合路径
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

使用说明 #

可根据你的实际设计需求调整indentRadius和padding两个参数：

• indentRadius控制凹陷的深度，数值越大凹陷越深
• padding控制凹陷和侧边的间距，避免和按钮产生边界重叠
• 所有计算基于组件实际尺寸，适配不同宽度的屏幕不会变形

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