Flutter Stack中如何上下布局组件并让Overlay匹配CustomPaint尺寸？

你的核心问题是FittedBox会对CustomPaint进行缩放，直接指定固定宽高的Overlay无法匹配缩放后的实际尺寸。最简洁的解决方式是调整组件层级，让Overlay和CustomPaint共享同一个FittedBox的缩放规则，具体实现如下：

修改后的完整代码 #

Stack(
  alignment: Alignment.center,
  children: <Widget>[
    FittedBox(
      fit: BoxFit.cover,
      child: Stack( // 将Stack移到FittedBox内部，让两个组件共享缩放规则
        alignment: Alignment.center,
        children: [
          CustomPaint(
            size: const Size(1024, 768), // 原始固定尺寸
            painter: _painter,
          ),
          // 半透明Overlay容器，自动匹配CustomPaint的缩放后尺寸
          Container(
            width: 1024,
            height: 768,
            color: Colors.red.withOpacity(0.5),
          ),
        ],
      ),
    ),
  ],
)

关键逻辑说明 #

• 将原本独立的CustomPaint和Overlay容器，放到同一个FittedBox内部的Stack中：FittedBox会以相同的缩放比例处理两个组件，保证它们的显示尺寸完全一致。
• 给Overlay容器设置与CustomPaint完全相同的原始宽高（1024x768）：FittedBox会自动对这个容器进行和CustomPaint一样的缩放，最终两者在屏幕上的渲染尺寸完全重合。

备选方案（用GlobalKey获取实际渲染尺寸） #

如果不想调整层级，也可以通过GlobalKey获取CustomPaint的实际渲染尺寸，动态设置Overlay的宽高：

final GlobalKey _customPaintKey = GlobalKey();
double? _overlayWidth;
double? _overlayHeight;

@override
void initState() {
  super.initState();
  // 在组件渲染完成后获取实际尺寸
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _updateOverlaySize();
  });
}

void _updateOverlaySize() {
  final RenderBox? renderBox = _customPaintKey.currentContext?.findRenderObject() as RenderBox?;
  if (renderBox != null) {
    setState(() {
      _overlayWidth = renderBox.size.width;
      _overlayHeight = renderBox.size.height;
    });
  }
}

// 组件代码
Stack(
  alignment: Alignment.center,
  children: <Widget>[
    FittedBox(
      fit: BoxFit.cover,
      child: Center(
        child: CustomPaint(
          key: _customPaintKey, // 绑定GlobalKey
          size: const Size(1024, 768),
          painter: _painter,
        ),
      ),
    ),
    Positioned.fill(
      child: Align(
        alignment: Alignment.center,
        child: Container(
          width: _overlayWidth, // 动态赋值实际宽度
          height: _overlayHeight, // 动态赋值实际高度
          color: Colors.red.withOpacity(0.5),
        ),
      ),
    ),
  ],
)

注：这种方法需要在CustomPaint渲染完成后触发尺寸更新，实现稍复杂，推荐第一种层级调整的方案。

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