Flutter问题：CustomPainter无法获取父组件完整尺寸

问题概述 #

在使用CustomPaint绘制自定义图形时，发现它无法填充父组件（Stack）的完整尺寸。调试控制台打印的父组件约束为BoxConstraints(0.0<=w<=411.4, 0.0<=h<=546.4)，但Stack内的橙色Container能正常占满空间，CustomPaint却做不到。

解决方案 #

1. 移除CustomPaint的手动size设置 #

你当前手动指定了size: Size(constraints.maxWidth, constraints.maxHeight)，但父组件给出的是范围约束（0到最大值），而非固定尺寸，这会导致CustomPaint无法自动适配父组件的实际占用空间。移除手动size后，CustomPaint会默认继承父组件的约束，自动占满可用区域。

修改后的LayoutBuilder代码：

LayoutBuilder(
  builder: (context , constraints ) {
    print(constraints);
    return CustomPaint(
        // 移除size属性，让CustomPaint自动适配父组件
        painter: TriangleDraw(context)
    );
  },
),

2. 强制CustomPaint占满父组件（可选） #

如果移除size后仍未解决，可以用SizedBox.expand()包裹CustomPaint，强制它占满父组件的全部空间：

LayoutBuilder(
  builder: (context , constraints ) {
    print(constraints);
    return SizedBox.expand(
      child: CustomPaint(
        painter: TriangleDraw(context),
      ),
    );
  },
),

3. 修正自定义绘制的路径逻辑 #

你的TriangleDraw中路径绘制存在逻辑错误，比如path.lineTo(size.height, size.width)会导致图形位置偏移，无法贴合组件边界。建议根据size的宽高参数正确绘制路径，示例如下：

@override
void paint(Canvas canvas, Size size) {
  print('Size: $size');
  var path = Path();

  // 示例：绘制一个覆盖组件大部分区域的多边形（可根据需求调整）
  path.moveTo(0, 0);
  path.lineTo(size.width, 0);
  path.lineTo(size.width, size.height);
  path.lineTo(0, size.height * 0.75);
  path.close();

  canvas.drawPath(path, painter);
}

原理说明 #

BoxConstraints(0.0<=w<=411.4, 0.0<=h<=546.4)表示父组件允许子组件的宽高在0到最大值之间动态调整，而非强制子组件使用最大值。当手动指定CustomPaint的size时，它会优先使用该固定尺寸，忽略父组件的动态约束；移除size后，CustomPaint会遵循父组件的约束规则，自动扩展到可用的最大空间。

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