Flutter自定义形状组件尺寸无法调整问题求助

你的问题核心出在三个地方：

• 组件内部硬编码了固定尺寸15，没有对外暴露可配置的尺寸参数
• 自定义画笔没有根据实际尺寸缩放预设的形状路径坐标
• shouldRepaint逻辑错误，尺寸变化时不会触发重绘

下面是修复后的完整代码，附带关键修改说明：

enum ShapeEnum {
  CIRCLE,
  STAR,
  SQUARE,
}

// 假设你的Shapes是基于100x100画布的单位坐标集合
class Shapes {
  static const List<Offset> circle = [/* 你的圆形单位坐标 */];
  static const List<Offset> square = [/* 你的方形单位坐标 */];
  static const List<Offset> star = [/* 你的星形单位坐标 */];
}

class CustomShapedWidget extends StatelessWidget {
  final ShapeEnum shape;
  final Widget child;
  // 新增可配置的尺寸参数，保留默认值兼容原有使用方式
  final double? width;
  final double? height;

  const CustomShapedWidget({
    Key? key,
    required this.shape,
    required this.child,
    this.width = 15,
    this.height = 15,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final currentSize = Size(width!, height!);
    return Container(
      width: width,
      height: height,
      child: CustomPaint(
        size: currentSize,
        painter: _CustomShapedPainter(
          shape: shape,
          size: currentSize,
        ),
        child: child,
      ),
    );
  }
}

class _CustomShapedPainter extends CustomPainter {
  final ShapeEnum shape;
  final Size size;

  _CustomShapedPainter({
    required this.shape,
    required this.size,
  });

  @override
  void paint(Canvas canvas, Size canvasSize) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeJoin = StrokeJoin.round;

    // 计算缩放比例：把预设的单位坐标映射到当前实际尺寸
    final scaleX = size.width / 100;
    final scaleY = size.height / 100;
    final matrix = Matrix4.diagonal3Values(scaleX, scaleY, 1.0);

    List<Offset> scaledPoints = [];
    switch (shape) {
      case ShapeEnum.CIRCLE:
        scaledPoints = Shapes.circle.map((p) => p.transform(matrix)).toList();
        break;
      case ShapeEnum.SQUARE:
        scaledPoints = Shapes.square.map((p) => p.transform(matrix)).toList();
        break;
      case ShapeEnum.STAR:
        scaledPoints = Shapes.star.map((p) => p.transform(matrix)).toList();
        break;
    }

    final path = Path()..addPolygon(scaledPoints, true);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(_CustomShapedPainter oldDelegate) {
    // 当形状或尺寸变化时触发重绘
    return oldDelegate.shape != shape || oldDelegate.size != size;
  }
}

关键修改点说明： #

1. 新增尺寸配置参数：给CustomShapedWidget添加width和height可选参数，外部可以自由调整大小：

   CustomShapedWidget(
     shape: ShapeEnum.STAR,
     width: 30,
     height: 30,
     child: Container(...),
   )
   

2. 路径坐标缩放：因为Shapes里的坐标是固定单位的预设点，通过矩阵缩放把这些点映射到实际组件尺寸，确保形状能跟随大小变化。如果你的Shapes预设坐标不是基于100x100，只需要修改scaleX/scaleY的分母为你的基准尺寸即可。
3. 修复重绘逻辑：修改shouldRepaint方法，当形状或尺寸变化时返回true，保证组件更新时能重新绘制正确的大小。

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