Flutter容器右侧弯曲效果实现问题：ClipPath自定义裁剪调整

根据你的需求，以下是两种常见右侧弯曲效果的自定义裁剪器实现，你可以根据预期效果选择：

方案1：右侧上下圆角内凹效果 #

这种效果适合容器右侧上下边缘向内弯曲的场景，代码如下：

class RoundedRightSideClipper extends CustomClipper<Path> {
  final double radius;

  RoundedRightSideClipper(this.radius);

  @override
  Path getClip(Size size) {
    final path = Path();
    // 起始点：左上角
    path.moveTo(0, 0);
    // 绘制到右上角左侧radius位置
    path.lineTo(size.width - radius, 0);
    // 右上角内凹圆弧：控制点在右上角，连接到右上角下方radius位置
    path.quadraticBezierTo(
      size.width, 0,
      size.width, radius,
    );
    // 绘制到右下角上方radius位置
    path.lineTo(size.width, size.height - radius);
    // 右下角内凹圆弧：控制点在右下角，连接到右下角左侧radius位置
    path.quadraticBezierTo(
      size.width, size.height,
      size.width - radius, size.height,
    );
    // 绘制到左下角，闭合路径
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return oldClipper is RoundedRightSideClipper && oldClipper.radius != radius;
  }
}

使用示例 #

ClipPath(
  clipper: RoundedRightSideClipper(24.0), // 调整radius控制弯曲程度
  child: Container(
    width: 280,
    height: 140,
    color: Colors.deepPurple,
    alignment: Alignment.centerLeft,
    padding: const EdgeInsets.only(left: 20),
    child: const Text(
      '右侧上下内凹容器',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

方案2：右侧中间外凸效果 #

如果预期是右侧中间向外凸起的弯曲，使用以下裁剪器：

class ConvexRightSideClipper extends CustomClipper<Path> {
  final double curveOffset;

  ConvexRightSideClipper(this.curveOffset);

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(0, 0);
    // 绘制到右上角
    path.lineTo(size.width, 0);
    // 右侧中间外凸曲线：控制点在右侧中间偏左curveOffset位置，连接到右下角
    path.quadraticBezierTo(
      size.width - curveOffset, size.height / 2,
      size.width, size.height,
    );
    // 绘制到左下角，闭合路径
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return oldClipper is ConvexRightSideClipper && oldClipper.curveOffset != curveOffset;
  }
}

使用示例 #

ClipPath(
  clipper: ConvexRightSideClipper(30.0), // 调整curveOffset控制凸起程度
  child: Container(
    width: 280,
    height: 140,
    color: Colors.orange,
    alignment: Alignment.centerLeft,
    padding: const EdgeInsets.only(left: 20),
    child: const Text(
      '右侧中间外凸容器',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

关键调整说明 #

• 若你的原有裁剪器未达到预期，大概率是路径点顺序错误或贝塞尔曲线控制点坐标设置不合理。你可以通过调整radius/curveOffset参数，或修改贝塞尔曲线的控制点坐标，来匹配你想要的弯曲弧度。
• 若需要更复杂的弯曲效果（如多个曲线组合），可以在getClip方法中添加更多的lineTo、quadraticBezierTo或cubicTo路径指令。

内容的提问来源于stack exchange，提问作者Gbenga B Ayannuga