Flutter中Container与CustomPaint的图形绘制实战

1. Flutter中的Container与CustomPaint基础

在Flutter开发中，Container是最常用的布局组件之一，它不仅可以管理子组件的尺寸、边距和装饰效果，还能通过CustomPaint实现高度自定义的绘制功能。这种组合方式特别适合需要在鸿蒙（HarmonyOS）等跨平台应用中实现独特UI效果的场景。

1.1 CustomPaint核心工作机制

CustomPaint组件的工作原理基于Flutter的绘制系统，它提供了两个关键属性：

• painter：负责背景绘制，在子组件下方渲染
• foregroundPainter：负责前景绘制，在子组件上方渲染

每个CustomPainter子类必须实现两个核心方法：

dart复制@override
void paint(Canvas canvas, Size size) {
  // 在这里实现自定义绘制逻辑
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
  // 决定是否需要重绘
  return true;
}

提示：shouldRepaint方法的优化对性能影响很大。如果绘制内容不会变化，应该返回false以避免不必要的重绘。

1.2 与Container的集成方式

将CustomPaint嵌入Container的典型结构如下：

dart复制Container(
  width: 200,
  height: 200,
  padding: EdgeInsets.all(16),
  child: CustomPaint(
    painter: MyCustomPainter(),
    child: Center(child: Text('内容')),
  ),
)

这种结构实现了三层绘制：

1. Container自身的背景和边框（通过decoration属性）
2. CustomPaint的自定义绘制
3. 子组件的内容

2. 图形绘制实战技巧

2.1 基础几何图形绘制

Canvas类提供了多种基础图形绘制方法：

dart复制// 圆形
canvas.drawCircle(Offset(100, 100), 50, paint);

// 矩形
canvas.drawRect(Rect.fromLTRB(50, 50, 150, 150), paint);

// 圆角矩形
canvas.drawRRect(
  RRect.fromRectAndRadius(
    Rect.fromLTRB(50, 50, 150, 150),
    Radius.circular(10),
  ), 
  paint
);

// 椭圆
canvas.drawOval(Rect.fromLTRB(50, 50, 150, 100), paint);

性能优化技巧：

• 复用Paint对象而不是每次绘制都新建
• 对于静态图形，将shouldRepaint设为false
• 使用clipPath限制绘制区域

2.2 多边形与星形绘制

复杂图形需要使用Path类构建：

dart复制// 五边形绘制示例
Path createPentagon(Offset center, double radius) {
  fi