一、为什么需要自定义绘制
在Flutter开发中，我们经常会遇到系统提供的标准组件无法满足需求的情况。比如想要一个特殊形状的进度条，或者一个带有复杂动画效果的图表，这时候就需要用到自定义绘制的能力。Flutter提供了强大的Canvas API，让我们可以像在白纸上作画一样自由地绘制任何图形。
想象一下，你是一位画家，Canvas就是你的画布，而CustomPaint则是你的画笔和颜料。通过它们，你可以创造出任何你能想象到的UI效果。这种能力让Flutter在UI表现力上远超其他跨平台框架。
二、认识Canvas和CustomPaint
CustomPaint是一个Widget，它提供了一个画布(Canvas)供我们绘制。Canvas则提供了各种绘制方法，比如画线、画圆、画矩形等。它们的关系就像画架和画笔的关系。
让我们看一个最简单的例子（技术栈：Flutter/Dart）：
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// 创建一个红色画笔
final paint = Paint()
..color = Colors.red
..strokeWidth = 5
..style = PaintingStyle.fill;
// 在画布中央画一个圆
canvas.drawCircle(
Offset(size.width/2, size.height/2), // 圆心位置
50, // 半径
paint // 使用的画笔
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
// 使用这个绘制器
CustomPaint(
painter: MyPainter(),
size: Size(200, 200),
)
这段代码做了以下几件事：
- 创建了一个自定义的Painter类
- 在paint方法中配置了一个红色的画笔
- 使用这个画笔在画布中央画了一个半径为50的圆
- 通过shouldRepaint方法控制是否需要重绘
三、Canvas的绘制能力详解
Canvas提供了丰富的绘制方法，让我们来看看最常用的几种：
1. 绘制基本形状
void paint(Canvas canvas, Size size) {
// 绘制矩形
canvas.drawRect(
Rect.fromLTWH(50, 50, 100, 80), // 左上角坐标和宽高
Paint()..color = Colors.blue,
);
// 绘制圆角矩形
canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromLTWH(50, 150, 100, 80),
Radius.circular(10),
),
Paint()..color = Colors.green,
);
// 绘制椭圆
canvas.drawOval(
Rect.fromLTWH(50, 250, 100, 80),
Paint()..color = Colors.orange,
);
}
2. 绘制路径
Path类可以让我们绘制更复杂的形状：
void paint(Canvas canvas, Size size) {
final path = Path()
..moveTo(50, 50) // 移动到起点
..lineTo(150, 50) // 画线到
..lineTo(100, 150) // 画线到
..close(); // 闭合路径
canvas.drawPath(
path,
Paint()
..color = Colors.purple
..style = PaintingStyle.stroke
..strokeWidth = 3,
);
}
3. 绘制文本
void paint(Canvas canvas, Size size) {
final textPainter = TextPainter(
text: TextSpan(
text: 'Hello Canvas',
style: TextStyle(
color: Colors.black,
fontSize: 24,
),
),
textDirection: TextDirection.ltr,
)..layout();
textPainter.paint(
canvas,
Offset(
(size.width - textPainter.width) / 2,
(size.height - textPainter.height) / 2,
),
);
}
四、实战：创建一个自定义进度条
让我们把这些知识综合起来，创建一个圆形的进度条：
class CircularProgressPainter extends CustomPainter {
final double progress; // 0.0 ~ 1.0
CircularProgressPainter(this.progress);
@override
void paint(Canvas canvas, Size size) {
final center = Offset(size.width/2, size.height/2);
final radius = size.width/2 * 0.8;
// 绘制背景圆
canvas.drawCircle(
center,
radius,
Paint()
..color = Colors.grey[300]!
..style = PaintingStyle.fill,
);
// 绘制进度弧线
final progressPaint = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 10
..strokeCap = StrokeCap.round;
canvas.drawArc(
Rect.fromCircle(center: center, radius: radius),
-pi/2, // 从12点方向开始
2 * pi * progress, // 弧度
false, // 是否使用中心点
progressPaint,
);
// 绘制进度文本
final textPainter = TextPainter(
text: TextSpan(
text: '${(progress * 100).toStringAsFixed(1)}%',
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
textDirection: TextDirection.ltr,
)..layout();
textPainter.paint(
canvas,
Offset(
center.dx - textPainter.width/2,
center.dy - textPainter.height/2,
),
);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return (oldDelegate as CircularProgressPainter).progress != progress;
}
}
这个进度条包含了：
- 一个灰色的背景圆
- 一个蓝色的进度弧线
- 中央显示百分比文本
- 根据progress参数动态更新
五、高级技巧：使用save和restore管理画布状态
Canvas提供了save和restore方法，可以保存和恢复画布的状态，这在复杂绘制中非常有用：
void paint(Canvas canvas, Size size) {
// 绘制第一个矩形
canvas.drawRect(
Rect.fromLTWH(50, 50, 100, 100),
Paint()..color = Colors.red,
);
// 保存当前画布状态
canvas.save();
// 平移画布
canvas.translate(200, 0);
// 旋转画布
canvas.rotate(pi/4);
// 绘制变换后的矩形
canvas.drawRect(
Rect.fromLTWH(0, 0, 100, 100),
Paint()..color = Colors.blue,
);
// 恢复画布状态
canvas.restore();
// 再次绘制，不受之前变换影响
canvas.drawRect(
Rect.fromLTWH(50, 200, 100, 100),
Paint()..color = Colors.green,
);
}
六、性能优化与注意事项
- 减少重绘：合理实现shouldRepaint方法，避免不必要的重绘
- 使用RepaintBoundary：对于静态或很少变化的绘制内容，使用RepaintBoundary可以提升性能
- 避免复杂计算：paint方法会被频繁调用，避免在其中进行耗时计算
- 分层绘制：复杂的UI可以拆分成多个CustomPaint，各自负责不同的部分
- 硬件加速：Flutter的绘制默认使用硬件加速，但过度绘制仍会影响性能
七、应用场景分析
自定义绘制在以下场景特别有用：
- 数据可视化：图表、仪表盘等
- 游戏开发：2D游戏中的各种元素
- 自定义控件：特殊形状的按钮、滑块等
- 艺术效果：绘制类应用、滤镜效果等
- 动画效果：复杂的路径动画、粒子效果等
八、技术优缺点
优点：
- 极高的自由度，可以实现任何2D图形
- 性能优秀，底层使用Skia图形引擎
- 跨平台一致性，在所有平台上表现一致
- 动画支持良好，可以结合Flutter的动画系统
缺点：
- 学习曲线较陡，需要理解坐标系、变换等概念
- 复杂图形代码量大，维护成本高
- 缺少内置的高级图形功能（如3D）
九、总结
Flutter的自定义绘制功能强大而灵活，通过Canvas和CustomPaint的组合，我们可以突破标准组件的限制，创造出独一无二的UI体验。虽然学习曲线较陡，但一旦掌握，就能解锁Flutter的全部视觉表现力。
在实际开发中，建议先从简单的图形开始练习，逐步掌握各种绘制方法和技巧。对于复杂的图形，可以拆分成多个简单的部分分别绘制。记住性能优化的要点，确保你的自定义绘制既美观又高效。
评论