Flutter自定义圆形组件设计：求高效响应式实现方案

1. 优先使用内置组件组合（最低开销方案） #

如果你的圆形组件不需要复杂的自定义绘制（比如渐变、纹理填充之外的基础需求），直接用Container+BoxDecoration是最优解——Flutter对内置组件的渲染做了深度优化，内存占用极低，响应式适配也简单。

class ResponsiveCircle extends StatelessWidget {
  final double? size;
  final Color color;
  final double strokeWidth;
  final bool isFilled;

  const ResponsiveCircle({
    super.key,
    this.size,
    required this.color,
    this.strokeWidth = 2.0,
    this.isFilled = true,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 响应式适配：未指定size时，自动取父容器约束的最小边
        final circleSize = size ?? min(constraints.maxWidth, constraints.maxHeight);
        return Container(
          width: circleSize,
          height: circleSize,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: isFilled ? color : Colors.transparent,
            border: isFilled ? null : Border.all(color: color, width: strokeWidth),
          ),
        );
      },
    );
  }
}

2. 优化CustomPainter（复杂绘制场景） #

如果必须用自定义绘制（比如需要特殊的笔触、动态路径），之前资源占用高大概率是没做重绘控制和隔离。按以下方式优化：

• 重写shouldRepaint，仅当属性变化时才触发重绘
• 用RepaintBoundary隔离绘制区域，避免父组件重绘连带触发当前组件重绘

class OptimizedCirclePainter extends CustomPainter {
  final Color color;
  final double strokeWidth;
  final bool isFilled;

  OptimizedCirclePainter({
    required this.color,
    required this.strokeWidth,
    required this.isFilled,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final radius = min(size.width, size.height) / 2 - strokeWidth / 2;
    final paint = Paint()
      ..color = color
      ..style = isFilled ? PaintingStyle.fill : PaintingStyle.stroke
      ..strokeWidth = strokeWidth;

    canvas.drawCircle(center, radius, paint);
  }

  @override
  bool shouldRepaint(covariant OptimizedCirclePainter oldDelegate) {
    // 仅当属性变化时才重绘，避免无意义的绘制开销
    return oldDelegate.color != color ||
        oldDelegate.strokeWidth != strokeWidth ||
        oldDelegate.isFilled != isFilled;
  }
}

// 使用时配合RepaintBoundary
class ResponsiveCustomCircle extends StatelessWidget {
  final double? size;
  final Color color;
  final double strokeWidth;
  final bool isFilled;

  const ResponsiveCustomCircle({
    super.key,
    this.size,
    required this.color,
    this.strokeWidth = 2.0,
    this.isFilled = true,
  });

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final circleSize = size ?? min(constraints.maxWidth, constraints.maxHeight);
        return RepaintBoundary(
          child: SizedBox(
            width: circleSize,
            height: circleSize,
            child: CustomPaint(
              painter: OptimizedCirclePainter(
                color: color,
                strokeWidth: strokeWidth,
                isFilled: isFilled,
              ),
            ),
          ),
        );
      },
    );
  }
}

3. 固定属性场景用const构造缓存 #

如果圆形的颜色、大小等属性完全固定，用const构造的CustomPainter，Flutter会缓存绘制对象，进一步降低内存占用：

class ConstCirclePainter extends CustomPainter {
  const ConstCirclePainter({required this.color});

  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width/2, size.height/2);
    final radius = min(size.width, size.height)/2;
    canvas.drawCircle(center, radius, Paint()..color = color);
  }

  @override
  bool shouldRepaint(covariant ConstCirclePainter oldDelegate) {
    return oldDelegate.color != color;
  }
}

// 使用示例
Widget buildFixedCircle() {
  return LayoutBuilder(
    builder: (context, constraints) {
      return SizedBox(
        width: min(constraints.maxWidth, constraints.maxHeight),
        height: min(constraints.maxWidth, constraints.maxHeight),
        child: CustomPaint(
          painter: const ConstCirclePainter(color: Colors.blue),
        ),
      );
    },
  );
}

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