← 返回首页

🎨 画布组件详解

Flutter 提供了强大的 2D 绘图功能，通过画布组件可以实现自定义图形和动画效果。

🖌️ CustomPaint

CustomPaint 是一个自定义绘制组件，通过 CustomPainter 实现自定义绘制逻辑。

渲染预览

基本用法

class MyPainter 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),
      size.width / 4,
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

CustomPaint(
  painter: MyPainter(),
  size: Size(200, 200),
)

常用属性

属性 类型 说明
painter CustomPainter 前景绘制器
foregroundPainter CustomPainter 背景绘制器
size Size 画布尺寸
child Widget 子组件
💡 提示：CustomPaint 可以实现复杂的图形绘制，如图表、自定义形状等。

🎨 Canvas

Canvas 是画布对象，提供了丰富的绘制方法，用于在画布上绘制各种图形。

渲染预览

常用绘制方法

@override
void paint(Canvas canvas, Size size) {
  final paint = Paint()
    ..color = Colors.blue
    ..strokeWidth = 3
    ..style = PaintingStyle.stroke;

  // 绘制线段
  canvas.drawLine(
    Offset(0, 0),
    Offset(size.width, size.height),
    paint,
  );

  // 绘制矩形
  canvas.drawRect(
    Rect.fromLTWH(50, 50, 100, 100),
    paint,
  );

  // 绘制圆角矩形
  canvas.drawRRect(
    RRect.fromRectAndRadius(
      Rect.fromLTWH(200, 50, 100, 100),
      Radius.circular(10),
    ),
    paint,
  );

  // 绘制椭圆
  canvas.drawOval(
    Rect.fromLTWH(50, 200, 150, 100),
    paint,
  );

  // 绘制路径
  final path = Path();
  path.moveTo(200, 250);
  path.lineTo(300, 250);
  path.lineTo(250, 200);
  path.close();
  canvas.drawPath(path, paint);
}

常用方法

  • drawLine()：绘制线段
  • drawRect()：绘制矩形
  • drawCircle()：绘制圆形
  • drawOval()：绘制椭圆
  • drawPath()：绘制路径
  • drawImage()：绘制图片
  • drawText()：绘制文本
💡 提示：Canvas 提供了丰富的绘制 API，可以实现各种复杂的图形效果。

🖌️ Paint

Paint 是绘制样式对象，用于控制绘制的外观，如颜色、线条宽度、填充模式等。

渲染预览

基本用法

final paint = Paint()
  ..color = Colors.red
  ..strokeWidth = 5
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..strokeJoin = StrokeJoin.round
  ..shader = LinearGradient(
    colors: [Colors.red, Colors.blue],
  ).createShader(Rect.fromLTWH(0, 0, 200, 200));

// 填充模式
final fillPaint = Paint()
  ..color = Colors.green
  ..style = PaintingStyle.fill;

// 带阴影
final shadowPaint = Paint()
  ..color = Colors.black
  ..maskFilter = MaskFilter.blur(BlurStyle.normal, 5);

常用属性

属性 类型 说明
color Color 颜色
strokeWidth double 线条宽度
style PaintingStyle 绘制样式（填充/描边）
strokeCap StrokeCap 线端样式
strokeJoin StrokeJoin 线连接样式
shader Shader 着色器（渐变等）
maskFilter MaskFilter 遮罩滤镜（阴影等）
💡 提示：Paint 的级联操作符（..）可以链式调用，方便设置多个属性。

📍 Path

Path 是路径对象，用于定义复杂的图形路径，可以包含直线、曲线、圆弧等。

渲染预览

基本用法

final path = Path();

// 移动到起点
path.moveTo(0, 0);

// 绘制直线
path.lineTo(100, 100);

// 绘制贝塞尔曲线
path.quadraticBezierTo(
  150, 150,
  200, 100,
);

// 绘制三次贝塞尔曲线
path.cubicTo(
  250, 50,
  300, 150,
  350, 100,
);

// 绘制圆弧
path.arcToPoint(
  Offset(400, 150),
  radius: Radius.circular(50),
);

// 绘制椭圆弧
path.arcTo(
  Rect.fromLTWH(400, 150, 100, 100),
  0,
  3.14,
  false,
);

// 绘制圆形
path.addOval(
  Rect.fromCircle(
    center: Offset(500, 200),
    radius: 50,
  ),
);

// 绘制矩形
path.addRect(
  Rect.fromLTWH(50, 200, 100, 100),
);

// 绘制圆角矩形
path.addRRect(
  RRect.fromRectAndRadius(
    Rect.fromLTWH(200, 200, 100, 100),
    Radius.circular(20),
  ),
);

// 绘制多边形
path.addPolygon([
  Offset(350, 200),
  Offset(400, 300),
  Offset(300, 300),
], true);

// 闭合路径
path.close();

// 绘制路径
canvas.drawPath(path, paint);

常用方法

  • moveTo()：移动到指定点
  • lineTo()：绘制直线
  • quadraticBezierTo()：绘制二次贝塞尔曲线
  • cubicTo()：绘制三次贝塞尔曲线
  • arcTo()：绘制圆弧
  • addOval()：添加椭圆
  • addRect()：添加矩形
  • addRRect()：添加圆角矩形
  • close()：闭合路径
💡 提示：Path 可以创建各种复杂的形状，是自定义绘制的核心工具。
← 返回首页