Flutter中如何按附图所示裁剪Container容器组件？

Hey there! 想要把Flutter的Container裁成你附件里的特殊形状是吧？我来分享几个实用的方案，都是实际项目里亲测好用的，帮你搞定这个需求～

这是处理自定义形状裁剪的首选方案，不管你要的是切角、多边形还是不规则曲线，都能精准实现。

步骤： #

1. 自定义一个CustomClipper<Path>子类，在getClip方法里画出你需要的裁剪路径
2. 把你的Container用ClipPath组件包裹，指定clipper为你自定义的类

举个例子，假设你要的是顶部左右切角+底部圆角的流行卡片样式，代码如下：

class CustomCardClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角右侧30px处开始
    path.moveTo(30, 0);
    // 画直线到右上角左侧30px处
    path.lineTo(size.width - 30, 0);
    // 右上角切角：斜切到右上角顶点下方30px
    path.lineTo(size.width, 30);
    // 直线到右下角上方20px处
    path.lineTo(size.width, size.height - 20);
    // 右下角圆角：用二次贝塞尔曲线画圆角
    path.quadraticBezierTo(size.width, size.height, size.width - 20, size.height);
    // 直线到左下角上方20px处
    path.lineTo(20, size.height);
    // 左下角圆角
    path.quadraticBezierTo(0, size.height, 0, size.height - 20);
    // 左上角切角：斜切到左上角顶点右侧30px
    path.lineTo(0, 30);
    // 闭合路径
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

使用方式： #

ClipPath(
  clipper: CustomCardClipper(),
  child: Container(
    width: 320,
    height: 180,
    color: Colors.deepPurple,
    child: const Center(
      child: Text(
        '自定义裁剪的Container',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

你只需要根据附件里的形状，调整getClip里的坐标点（比如切角长度、圆角半径），就能完全匹配你要的样式。

如果你的需求只是对称圆角、单侧圆角这类简单样式，用这个方案更高效，代码量少，性能也更好。

比如实现顶部左右圆角+底部直角的容器：

ClipRRect(
  borderRadius: const BorderRadius.vertical(
    top: Radius.circular(25),
  ),
  child: Container(
    width: 320,
    height: 180,
    color: Colors.teal,
    child: const Center(
      child: Text(
        '简单圆角裁剪',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

如果是不对称的单侧圆角，用BorderRadius.only：

ClipRRect(
  borderRadius: const BorderRadius.only(
    topRight: Radius.circular(30),
    bottomLeft: Radius.circular(30),
  ),
  child: Container(/* ... */),
)

如果你需要给裁剪后的容器加自定义边框、渐变背景这类额外装饰，直接用CustomPaint绘制形状会更方便，不需要额外嵌套组件。

代码示例： #

CustomPaint(
  painter: CustomShapePainter(),
  child: const SizedBox(
    width: 320,
    height: 180,
    child: Center(
      child: Text(
        '带渐变的自定义容器',
        style: TextStyle(color: Colors.white, fontSize: 18),
      ),
    ),
  ),
)

class CustomShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 绘制渐变背景
    final gradient = LinearGradient(
      colors: [Colors.orange, Colors.deepOrange],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    );
    final paint = Paint()..shader = gradient.createShader(Offset.zero & size);
    
    // 绘制形状路径（和ClipPath里的路径一致）
    final path = Path();
    path.moveTo(30, 0);
    path.lineTo(size.width - 30, 0);
    path.lineTo(size.width, 30);
    path.lineTo(size.width, size.height - 20);
    path.quadraticBezierTo(size.width, size.height, size.width - 20, size.height);
    path.lineTo(20, size.height);
    path.quadraticBezierTo(0, size.height, 0, size.height - 20);
    path.lineTo(0, 30);
    path.close();
    
    canvas.drawPath(path, paint);
    
    // 可选：绘制白色边框
    final borderPaint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;
    canvas.drawPath(path, borderPaint);
  }

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

• 给裁剪后的容器加边框时，不要直接给Container设置border，因为裁剪会把边框的多余部分切掉，应该用CustomPainter绘制边框，或者在ClipPath外层嵌套一个带边框的容器（注意尺寸匹配）。
• 调试路径时，可以在Flutter DevTools里开启“Debug Paint”，能直观看到路径的走向，方便调整坐标参数。

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