Flutter中如何实现可动态调整尺寸的CustomPainter？

问题根源 #

CustomPaint 的默认尺寸遵循以下优先级规则：

1. 优先使用显式设置的 size 参数
2. 未设置 size 但指定了 child 时，尺寸自动匹配子组件大小
3. 既无 size 也无 child 时，默认尺寸为 0x0

你之前尝试把 Expanded、Spacer 这类组件放在 CustomPaint 的 child 属性中不符合布局规范：这类 Flex 适配组件仅能作为 Row/Column/Flex 容器的直接子节点使用，放在其他容器的 child 位置不仅不会生效，还可能触发布局异常。 #

实现方案 #

方案1：不需要任何子组件（完全符合你的需求） #

直接通过外层组件给 CustomPaint 传递紧约束，不需要设置 child 属性，自然不会存在子组件遮挡的问题：

• 如果 CustomPaint 的父容器是 Row/Column/Flex 这类弹性布局容器：

Expanded(
  child: CustomPaint(
    painter: Sky(),
    // 不声明child属性，没有任何子组件
  ),
)

• 如果 CustomPaint 的父容器是 Stack、Container 这类已提供固定约束的容器：

SizedBox.expand(
  child: CustomPaint(
    painter: Sky(),
  ),
)

方案2：后续需要添加子组件且不遮挡CustomPaint #

使用 Stack 包裹，把 CustomPaint 放在最底层，子组件放在上层，层级可按需调整：

SizedBox.expand(
  child: Stack(
    children: [
      // 底层是CustomPaint，绘制内容不会被上层组件遮挡
      CustomPaint(painter: Sky()),
      // 上层按需放置你需要的其他组件，可配合Positioned定位
      Center(
        child: // 你的自定义组件
      )
    ],
  ),
)

注意事项 #

• 自定义的 Painter 实现类中，可以直接使用 paint 方法传入的 size 参数获取 CustomPaint 的实际宽高，做自适应绘制逻辑
• 不需要子组件时不要给 child 传空 Container 这类占位组件，直接省略 child 属性即可，减少不必要的布局开销

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