求助：如何使用Flutter Custom Paint复刻Figma设计图

第一步：拆解Figma设计元素 #

• 把设计图拆成基础单元：矩形、圆形、自定义路径、渐变块、描边图形等；文字优先用Flutter的Text组件叠加，复杂文字效果再考虑用Custom Paint绘制
• 从Figma里提取每个元素的关键参数：坐标位置、宽高尺寸、颜色值（十六进制）、渐变方向/色值、圆角半径、描边宽度等，这些是绘制的核心依据

第二步：掌握Custom Paint核心组件 #

Custom Paint的核心是三个类，先搞懂基础用法：

• CustomPaint：作为绘制容器，指定画布尺寸和关联的绘制类
• CustomPainter：必须继承的类，重写paint（写绘制逻辑）和shouldRepaint（控制是否重绘）方法
• Canvas：绘制操作的载体，提供各种图形绘制API

基础模板代码：

class DesignPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // 所有绘制逻辑写在这里
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 静态设计返回false，动态更新时返回true
  }
}

// 页面中使用
CustomPaint(
  size: Size(375, 667), // 对应Figma里的设计画布尺寸
  painter: DesignPainter(),
)

第三步：常见设计元素的绘制示例 #

1. 带圆角的填充矩形 #

// 创建画笔，设置填充颜色
final fillPaint = Paint()..color = Color(0xFF42A5F5);
// 定义矩形区域：左上角x,y坐标，宽高
final rect = Rect.fromLTWH(50, 50, 250, 120);
// 转成带圆角的矩形
final roundedRect = RRect.fromRectAndRadius(rect, Radius.circular(12));
// 绘制到画布
canvas.drawRRect(roundedRect, fillPaint);

2. 渐变背景图形 #

// 创建线性渐变
final gradient = LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  colors: [Color(0xFF42A5F5), Color(0xFF1E88E5)],
);
// 给画笔设置渐变着色器
final gradientPaint = Paint()..shader = gradient.createShader(rect);
// 绘制渐变圆角矩形
canvas.drawRRect(roundedRect, gradientPaint);

3. 自定义路径（比如不规则图形） #

// 创建路径对象
final path = Path();
path.moveTo(100, 100); // 设置起点
path.lineTo(200, 100); // 画直线到(200,100)
path.quadraticBezierTo(250, 150, 200, 200); // 二次贝塞尔曲线
path.close(); // 闭合路径
// 创建描边画笔
final strokePaint = Paint()
  ..color = Colors.red
  ..strokeWidth = 2
  ..style = PaintingStyle.stroke;
// 绘制路径
canvas.drawPath(path, strokePaint);

第四步：对齐与屏幕适配 #

• 如果是固定尺寸设计，直接在CustomPaint的size参数里设置和Figma一致的尺寸
• 需要适配不同屏幕时，用MediaQuery.of(context).size获取屏幕宽高，按比例缩放Figma里的所有参数（比如Figma宽375，屏幕宽414，缩放比例就是414/375）

第五步：调试技巧 #

• 用canvas.drawLine绘制辅助线，快速定位元素的坐标边界
• 利用Flutter DevTools的“Widget Inspector”查看CustomPaint的布局范围
• 分模块绘制：先画底层背景，再叠加中层元素，最后画顶层细节，每一步运行验证效果

第六步：进阶优化 #

• 复杂动画效果：结合AnimationController，在CustomPainter中接收动画参数，动态更新绘制属性
• 复用绘制逻辑：把重复的图形（比如通用按钮样式）封装成单独的方法，减少冗余代码

内容的提问来源于stack exchange，提问作者PNT