Flutter中如何实现如图所示的容器裁剪效果？

要实现图中所示的斜切角容器，直接用ClipRRect加旋转的方式没法精准控制切角样式，用CustomClipper自定义裁剪路径是最直接的方案。

自定义裁剪器实现 #

先定义一个自定义裁剪类，通过绘制路径来生成想要的斜切形状：

class DiagonalClipper extends CustomClipper<Path> {
  final double cutWidth; // 斜切角的宽度

  DiagonalClipper(this.cutWidth);

  @override
  Path getClip(Size size) {
    final path = Path();
    // 左上角斜切：从(0, cutWidth)到(cutWidth, 0)
    path.moveTo(0, cutWidth);
    path.lineTo(cutWidth, 0);
    // 右上角到右下角上方
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height - cutWidth);
    // 右下角斜切：从(width, height - cutWidth)到(width - cutWidth, height)
    path.lineTo(size.width - cutWidth, size.height);
    // 左下角回到起点
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) =>
      oldClipper is DiagonalClipper && oldClipper.cutWidth != cutWidth;
}

使用示例 #

把这个裁剪器和ClipPath结合，就能得到你想要的容器样式：

Container(
  width: 300,
  height: 300,
  color: Colors.white,
  child: ClipPath(
    clipper: DiagonalClipper(50), // 这里的50是斜切角的宽度，可根据需求调整
    child: Container(
      color: Colors.red,
      // 可以在里面添加子组件，比如图片、文本等
      child: const Center(
        child: Text("斜切角容器示例", style: TextStyle(color: Colors.white, fontSize: 20)),
      ),
    ),
  ),
);

说明 #

• cutWidth参数用来控制斜切角的大小，数值越大，斜切的角度越明显
• 这种方式可以精准控制切角的位置和大小，比旋转容器的方式更灵活，不会影响内部子组件的布局

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