Flutter如何实现不规则长方形绘制

在Flutter中如何绘制不规则长方形？有没有具体的实现方法或代码示例？

2 回复

Flutter中可通过CustomPainter自定义绘制不规则长方形。使用Path类定义不规则路径，例如添加点、直线或曲线，然后在paint方法中用canvas.drawPath()绘制。

更多关于Flutter如何实现不规则长方形绘制的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中绘制不规则长方形（非标准矩形）可以通过以下几种方式实现：

1. 使用CustomPainter自定义绘制

class IrregularRectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    // 定义不规则矩形的顶点
    final path = Path()
      ..moveTo(50, 50)           // 起点
      ..lineTo(200, 30)          // 右上角
      ..lineTo(180, 150)         // 右下角
      ..lineTo(30, 130)          // 左下角
      ..close();                 // 闭合路径
    
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 使用
CustomPaint(
  painter: IrregularRectanglePainter(),
  size: Size(250, 200),
)

2. 使用ClipPath裁剪

ClipPath(
  clipper: IrregularRectangleClipper(),
  child: Container(
    width: 200,
    height: 150,
    color: Colors.red,
  ),
)

class IrregularRectangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, size.height * 0.2)
      ..lineTo(size.width * 0.8, 0)
      ..lineTo(size.width, size.height * 0.7)
      ..lineTo(size.width * 0.2, size.height)
      ..close();
    return path;
  }
  
  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

3. 使用Polygon实现

CustomPaint(
  painter: PolygonPainter(),
  size: Size(200, 150),
)

class PolygonPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;
    
    final points = [
      Offset(0, size.height * 0.3),
      Offset(size.width * 0.7, 0),
      Offset(size.width, size.height * 0.6),
      Offset(size.width * 0.3, size.height),
    ];
    
    final path = Path()..addPolygon(points, true);
    canvas.drawPath(path, paint);
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

主要方法说明：

  • CustomPainter：适合完全自定义绘制
  • ClipPath：适合对现有widget进行不规则裁剪
  • Path：核心类，用于定义不规则形状的路径

选择哪种方式取决于具体需求：如果需要完全控制绘制过程，使用CustomPainter；如果只是要对现有widget进行形状裁剪，使用ClipPath更简单。

回到顶部