如何在Flutter中创建平行四边形形状的Container？

不用依赖第三方库，直接用Flutter原生API就能实现，给你两种实用方案：

方案一：Transform.skew 快速实现 #

通过矩阵倾斜变换，代码简单易上手，适合纯展示场景：

Container(
  width: 200,
  height: 100,
  child: Transform(
    // 调整skewX的值控制倾斜方向和程度，-0.3是左斜，正数为右斜
    transform: Matrix4.skewX(-0.3),
    child: Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.blue.shade400,
      alignment: Alignment.center,
      child: Text('平行四边形', style: TextStyle(color: Colors.white, fontSize: 16)),
    ),
  ),
)

注意：这个方法的容器点击区域还是原始矩形，如果需要交互匹配形状，建议用第二种方案。

方案二：ClipPath 自定义裁剪（支持交互） #

自定义裁剪路径，让容器的实际形状和点击区域都是平行四边形：

1. 定义裁剪器 #

class ParallelogramClipper extends CustomClipper<Path> {
  final double skewWidth;

  ParallelogramClipper(this.skewWidth);

  @override
  Path getClip(Size size) {
    final path = Path();
    // 按平行四边形顶点顺序绘制路径
    path.moveTo(skewWidth, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width - skewWidth, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant ParallelogramClipper oldClipper) {
    return oldClipper.skewWidth != skewWidth;
  }
}

2. 使用裁剪器 #

ClipPath(
  // 调整skewWidth的值控制倾斜幅度，数值越大倾斜越明显
  clipper: ParallelogramClipper(30),
  child: Container(
    width: 200,
    height: 100,
    color: Colors.blue.shade400,
    alignment: Alignment.center,
    child: Text('平行四边形', style: TextStyle(color: Colors.white, fontSize: 16)),
  ),
)

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