Flutter中Stack内FittedBox适配CameraPreview报错求助

你遇到的RenderBox was not laid out错误，是因为CameraPreview没有固有尺寸，直接嵌套FittedBox时，FittedBox无法确定子组件的布局约束导致的。下面提供两种可靠的解决方案，实现类似BoxFit.cover的适配效果（保持比例、填满容器、裁剪超出部分）：

方案一：利用AspectRatio + OverflowBox + ClipRect #

这是最常用的方案，通过相机原生的宽高比来保持预览比例，同时裁剪超出容器的部分：

// 先确保相机控制器已初始化
if (!cameraController.value.isInitialized) {
  return const Center(child: CircularProgressIndicator());
}

return Stack(
  children: [
    SizedBox(
      width: mQWidth,
      height: mQHeight / 1.3,
      child: ClipRect(
        child: OverflowBox(
          maxWidth: double.infinity,
          maxHeight: double.infinity,
          child: AspectRatio(
            // 使用相机预览的原生比例
            aspectRatio: cameraController.value.aspectRatio,
            child: CameraPreview(cameraController),
          ),
        ),
      ),
    ),
  ],
);

原理说明： #

• AspectRatio强制保持相机预览的原生宽高比，避免拉伸
• OverflowBox允许AspectRatio超出父容器SizedBox的约束，确保能填满容器
• ClipRect裁剪掉超出SizedBox范围的预览内容，实现类似cover的裁剪效果

方案二：用Transform.scale手动计算缩放比例 #

通过计算容器与相机预览的比例差，手动缩放预览内容并裁剪：

if (!cameraController.value.isInitialized) {
  return const Center(child: CircularProgressIndicator());
}

// 计算容器的宽高比
final containerAspectRatio = mQWidth / (mQHeight / 1.3);
// 计算需要的缩放比例
final scale = containerAspectRatio > cameraController.value.aspectRatio
    ? mQWidth / ((mQHeight / 1.3) * cameraController.value.aspectRatio)
    : (mQHeight / 1.3) / (mQWidth / cameraController.value.aspectRatio);

return Stack(
  children: [
    SizedBox(
      width: mQWidth,
      height: mQHeight / 1.3,
      child: ClipRect(
        child: Transform.scale(
          scale: scale,
          alignment: Alignment.center, // 居中对齐预览内容
          child: CameraPreview(cameraController),
        ),
      ),
    ),
  ],
);

原理说明： #

• 对比容器宽高比和相机预览宽高比，取较大的缩放值，确保预览内容能填满容器
• Transform.scale按计算出的比例放大/缩小预览
• ClipRect裁剪超出容器的部分，保持容器内的预览无拉伸

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