Flutter中如何在有限高度内实现无拉伸相机预览？

要实现相机预览宽度匹配设备宽度、无拉伸且允许裁剪的效果，核心是基于相机原生预览比例约束预览组件尺寸，避免强制拉伸填充空间。以下是具体实现步骤：

1. 获取相机预览的宽高比 #

在页面的State类中，初始化相机时获取其原生预览尺寸的宽高比：

double _cameraAspectRatio = 0.0;

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) => _initCameraRatio());
}

Future<void> _initCameraRatio() async {
  // 等待相机控制器初始化完成
  await _controller.initialize();
  
  // 获取相机支持的预览尺寸列表，筛选横屏比例的尺寸（适配竖屏场景）
  final previewSizes = _controller.description.previewSizes;
  final targetSize = previewSizes.firstWhere(
    (size) => size.width / size.height > 1,
    orElse: () => previewSizes.first,
  );
  
  // 计算相机预览的宽高比
  _cameraAspectRatio = targetSize.width / targetSize.height;
  setState(() {});
}

2. 重构相机预览UI #

将原Expanded包裹的CameraPreview替换为裁剪+比例约束结构，确保宽度铺满屏幕，高度按相机比例自动计算，超出部分裁剪：

Widget build(BuildContext context) {
  return Container(
    height: SizeConfig.screenHeight,
    width: SizeConfig.screenWidth,
    child: Column(
      children: [
        // 相机预览区域：按比例显示，超出部分裁剪
        Expanded(
          child: _cameraAspectRatio == 0.0
              ? const Center(child: CircularProgressIndicator()) // 加载状态
              : ClipRect(
                  child: AspectRatio(
                    aspectRatio: _cameraAspectRatio,
                    child: CameraPreview(_controller),
                  ),
                ),
        ),
        // 固定高度的底部区域
        SizedBox(
          height: 230,
          child: /// 你的固定元素
        ),
      ],
    ),
  );
}

关键说明 #

• ClipRect：裁剪超出父容器的相机预览内容，避免画面溢出。
• AspectRatio：严格遵循相机原生预览比例约束组件尺寸，从根源避免拉伸变形。
• 初始化时等待相机控制器完成初始化，确保能正确获取预览尺寸。

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