Flutter CustomPainter绘制你的视觉诗篇当 Flutter 的 widget 无法满足你的艺术追求时CustomPainter 让你成为画布的主人。一、为什么要用 CustomPainter作为一名追求像素级还原的 UI 匠人我深知标准组件的局限。有时候设计稿上的那个微妙渐变、那个精确到像素级的曲线只有 CustomPainter 才能完美呈现。这就像画家面对空白画布——自由但需要技巧。二、基础架构1. CustomPainter 的基本结构import package:flutter/material.dart; class ArtisticPainter extends CustomPainter { override void paint(Canvas canvas, Size size) { final paint Paint() ..color Colors.blue ..strokeWidth 2 ..style PaintingStyle.stroke; // 你的绘制逻辑 canvas.drawCircle( Offset(size.width / 2, size.height / 2), 100, paint, ); } override bool shouldRepaint(covariant CustomPainter oldDelegate) false; }2. 使用 CustomPaint Widgetclass ArtisticWidget extends StatelessWidget { override Widget build(BuildContext context) { return CustomPaint( size: Size(300, 300), painter: ArtisticPainter(), ); } }三、绘制基础图形1. 渐变圆形class GradientCirclePainter extends CustomPainter { override void paint(Canvas canvas, Size size) { final center Offset(size.width / 2, size.height / 2); final radius size.width / 3; final gradient RadialGradient( colors: [Colors.purple, Colors.transparent], ).createShader( Rect.fromCircle(center: center, radius: radius), ); final paint Paint() ..shader gradient ..style PaintingStyle.fill; canvas.drawCircle(center, radius, paint); } override bool shouldRepaint(covariant CustomPainter oldDelegate) false; }2. 贝塞尔曲线class BezierPainter extends CustomPainter { override void paint(Canvas canvas, Size size) { final paint Paint() ..color Colors.teal ..strokeWidth 3 ..style PaintingStyle.stroke; final path Path() ..moveTo(0, size.height / 2) ..cubicTo( size.width * 0.25, size.height * 0.25, size.width * 0.75, size.height * 0.75, size.width, size.height / 2, ); canvas.drawPath(path, paint); } override bool shouldRepaint(covariant CustomPainter oldDelegate) false; }四、高级绘制技巧1. 粒子系统class ParticlePainter extends CustomPainter { final ListParticle particles; ParticlePainter(this.particles); override void paint(Canvas canvas, Size size) { for (var particle in particles) { final paint Paint() ..color particle.color.withOpacity(particle.opacity) ..style PaintingStyle.fill; canvas.drawCircle( Offset(particle.x, particle.y), particle.radius, paint, ); } } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; } class Particle { double x, y, radius, opacity; Color color; Particle({ required this.x, required this.y, required this.radius, required this.color, required this.opacity, }); }2. 动态波形class WavePainter extends CustomPainter { final double animationValue; WavePainter(this.animationValue); override void paint(Canvas canvas, Size size) { final paint Paint() ..color Colors.blue.withOpacity(0.6) ..style PaintingStyle.fill; final path Path(); path.moveTo(0, size.height); for (double x 0; x size.width; x) { final y size.height / 2 sin((x / size.width * 2 * pi) animationValue) * 50; path.lineTo(x, y); } path.lineTo(size.width, size.height); path.close(); canvas.drawPath(path, paint); } override bool shouldRepaint(covariant CustomPainter oldDelegate) true; }五、性能优化shouldRepaint只在必要时重绘图层缓存使用RepaintBoundary避免复杂计算在 paint 方法外预处理数据使用 Path 缓存复杂路径预先计算画布是空白的诗每一笔都是韵脚。#flutter #dart #custom-painter #ui #animation