如何让CameraPreview适配设备宽度以消除右侧黑边？

你遇到的右侧黑边是因为相机预览的原生比例（比如常见的4:3）和设备屏幕比例不匹配，默认渲染时会保持比例居中显示，从而出现空白区域。可以通过以下两种方式解决：

方法1：用AspectRatio + FittedBox实现铺满裁剪 #

直接修改CameraPreview部分代码，通过AspectRatio配合FittedBox让预览优先占满屏幕宽度，多余部分自动裁剪：

AspectRatio(
  // 沿用相机的原生比例
  aspectRatio: cameraController.value.aspectRatio,
  child: FittedBox(
    fit: BoxFit.cover, // 强制铺满容器，裁剪超出屏幕的部分
    child: SizedBox(
      width: MediaQuery.of(context).size.width,
      // 按相机比例计算对应高度，保证预览比例正确
      height: MediaQuery.of(context).size.width / cameraController.value.aspectRatio,
      child: CameraPreview(cameraController),
    ),
  ),
)

把你原代码中Stack里的CameraPreview(cameraController)替换成上述代码即可，这样预览会完全占满屏幕宽度，彻底消除右侧黑边。

方法2：用Transform.scale手动计算缩放比例 #

如果需要更精细的控制缩放对齐方式，可以手动计算缩放因子：

final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
final previewRatio = cameraController.value.aspectRatio;
final screenRatio = screenWidth / screenHeight;

// 计算让预览宽度铺满屏幕的缩放因子
double scale = screenWidth / (screenHeight * previewRatio);

// 竖屏场景下调整缩放逻辑
if (previewRatio < screenRatio) {
  scale = screenHeight / (screenWidth / previewRatio);
}

return Transform.scale(
  scale: scale,
  alignment: Alignment.center,
  child: CameraPreview(cameraController),
);

修改后的完整代码片段（方法1） #

return Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    Expanded(
        child: GestureDetector(
      onTapUp: (details) {
        focusOnTap(details);
      },
      onScaleStart: (details) {
        zoom = _scaleFactor;
      },
      onScaleUpdate: (details) {
        if (currentCamera == widget.normalCamera) {
          onZoomChange(details.scale);
        }
      },
      child: Stack(
        children: [
          // 修改后的CameraPreview部分
          AspectRatio(
            aspectRatio: cameraController.value.aspectRatio,
            child: FittedBox(
              fit: BoxFit.cover,
              child: SizedBox(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.width / cameraController.value.aspectRatio,
                child: CameraPreview(cameraController),
              ),
            ),
          ),
          // top banner
          Positioned.fill(
            ...
          ),
          // bottom banner
          Positioned.fill(
            ...
          ),
          // zoom selector
          Positioned.fill(
            ....
          ),
          // top actions
          SafeArea(
            ....
          ),
        ],
      ),
    )),
    // bottom actions
    GestureDetector(
      onHorizontalDragEnd: (details) {
        cameraController.dispose();
        widget.onSwipe(details);
      },
      child: Container(
        ....
      ),
    ),
  ],
);

注意：使用BoxFit.cover会裁剪掉预览超出屏幕的部分，如果你需要完整显示相机画面而非强制铺满，那只能保留黑边或调整布局，但你的需求是占满宽度，这个方案最适配。

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