Flutter 如何实现图形绘制

在Flutter中实现图形绘制有哪些方法？我想画一些简单的几何图形和自定义路径，但不太清楚该用CustomPaint还是第三方库。能否介绍下Flutter原生支持的绘制方式，以及如何控制绘制的层级和性能优化？最好能提供一些基础图形的绘制代码示例。

2 回复

Flutter中可通过CustomPaint和CustomPainter实现图形绘制。CustomPaint作为画布容器，CustomPainter定义绘制逻辑，使用Canvas的drawRect、drawCircle等方法绘制图形，结合Paint设置样式。

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


在 Flutter 中，可以通过以下方式实现图形绘制：

1. CustomPaint 组件

这是最常用的图形绘制方式：

CustomPaint(
  painter: MyCustomPainter(),
  size: Size(300, 300),
)

2. 自定义 Painter

创建自定义绘制类：

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;
    
    // 绘制圆形
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      50,
      paint,
    );
    
    // 绘制矩形
    canvas.drawRect(
      Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: 100,
        height: 80,
      ),
      paint..color = Colors.red,
    );
  }

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

3. 常用绘制方法

void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.black
    ..strokeWidth = 2
    ..style = PaintingStyle.stroke;

  // 绘制直线
  canvas.drawLine(Offset(0, 0), Offset(100, 100), paint);
  
  // 绘制路径
  final path = Path()
    ..moveTo(50, 50)
    ..lineTo(100, 100)
    ..quadraticBezierTo(150, 50, 200, 100);
  canvas.drawPath(path, paint);
  
  // 绘制文字
  final textPainter = TextPainter(
    text: TextSpan(text: 'Hello', style: TextStyle(color: Colors.black)),
    textDirection: TextDirection.ltr,
  )..layout();
  textPainter.paint(canvas, Offset(50, 50));
}

4. 动画绘制

结合 AnimationController 实现动画效果：

class AnimatedPainter extends CustomPainter {
  final Animation<double> animation;
  
  AnimatedPainter(this.animation) : super(repaint: animation);
  
  @override
  void paint(Canvas canvas, Size size) {
    final radius = 50.0 * animation.value;
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      radius,
      Paint()..color = Colors.blue,
    );
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

这些方法可以满足大部分图形绘制需求，从简单的几何图形到复杂的自定义图形都能实现。

回到顶部