Flutter中如何裁剪椭圆边缘？求指定Widget的实现方案

你需要用ClipPath配合自定义裁剪路径来实现这种非标准的边缘形状，Container的borderRadius只能实现对称圆角，做不了这种斜切边缘的效果。

步骤1：自定义裁剪器 #

创建一个继承自CustomClipper<Path>的类，根据目标形状绘制路径：

class CustomShapeClipper extends CustomClipper<Path> {
  final double cornerRadius;
  final double edgeCutWidth;

  CustomShapeClipper({this.cornerRadius = 12, this.edgeCutWidth = 20});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 左上角：斜切起点到圆角
    path.moveTo(edgeCutWidth, cornerRadius);
    path.arcToPoint(
      Offset(edgeCutWidth + cornerRadius, 0),
      radius: Radius.circular(cornerRadius),
      clockwise: false,
    );
    // 顶部右侧：圆角到斜切点
    path.lineTo(size.width - edgeCutWidth - cornerRadius, 0);
    path.arcToPoint(
      Offset(size.width - edgeCutWidth, cornerRadius),
      radius: Radius.circular(cornerRadius),
    );
    // 右侧斜切到右下角圆角起点
    path.lineTo(size.width, size.height - cornerRadius);
    // 右下角圆角
    path.arcToPoint(
      Offset(size.width - cornerRadius, size.height),
      radius: Radius.circular(cornerRadius),
      clockwise: false,
    );
    // 底部左侧到左下角圆角起点
    path.lineTo(edgeCutWidth + cornerRadius, size.height);
    // 左下角圆角
    path.arcToPoint(
      Offset(edgeCutWidth, size.height - cornerRadius),
      radius: Radius.circular(cornerRadius),
    );
    // 左侧斜切回到起点，闭合路径
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomShapeClipper oldClipper) {
    return cornerRadius != oldClipper.cornerRadius || edgeCutWidth != oldClipper.edgeCutWidth;
  }
}

步骤2：使用裁剪器包裹Widget #

把需要裁剪的内容用ClipPath包裹，传入自定义的裁剪器：

ClipPath(
  clipper: CustomShapeClipper(cornerRadius: 16, edgeCutWidth: 24),
  child: Container(
    width: 300,
    height: 150,
    color: Colors.blue,
    child: const Center(
      child: Text(
        "自定义边缘Widget",
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

调整参数适配需求 #

• cornerRadius：控制四个圆角的大小，可根据目标效果修改数值
• edgeCutWidth：控制左右两侧斜切的宽度，调整它来匹配目标形状的斜切幅度

如果目标形状的斜切角度或细节有差异，直接修改getClip方法里的路径坐标即可。

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