Flutter中如何用BoxFit.cover在水平矩形框裁剪显示竖版视频

你的核心需求是让竖版视频填满水平方向的矩形容器，超出部分自动裁剪，保留中间区域。之前的代码问题出在多余的固定尺寸Container和硬编码的宽高比，导致FittedBox无法正确缩放视频到外层容器的尺寸。

错误原因分析 #

• 内层嵌套的Container(width:80, height:20)完全限制了视频的可用空间，FittedBox只能在这个小范围内缩放，无法利用外层容器的完整尺寸
• 手动设置SizedBox的宽高比（如16/9或6.2）属于硬编码，没有匹配竖版视频的真实宽高比，导致缩放比例错误

正确实现代码 #

Container(
  height: 194,
  width: Get.width,
  decoration: BoxDecoration(
    border: Border.all(width: 2, color: Colors.green),
  ),
  child: ClipRect(
    child: FittedBox(
      fit: BoxFit.cover,
      child: AspectRatio(
        // 竖版视频的标准宽高比（如9:16，对应1080x1920）
        aspectRatio: 9 / 16,
        child: VideoPlayer(oldController),
      ),
    ),
  ),
  // FURTHER IMPLEMENTATION
)

代码说明 #

1. 外层容器：固定你需要的水平矩形尺寸（height:194, width:Get.width），作为视频显示的最终区域
2. ClipRect：确保视频缩放后超出外层容器的部分被裁剪，避免内容溢出
3. FittedBox：设置fit:BoxFit.cover，让子组件（视频）按比例缩放，完全覆盖外层容器的空间，超出部分自动裁剪
4. AspectRatio：使用竖版视频的标准宽高比（9/16），保证视频不会被拉伸变形；如果需要适配视频真实比例，可以通过控制器动态获取：

   aspectRatio: oldController.value.size != null 
       ? oldController.value.size!.width / oldController.value.size!.height 
       : 9 / 16,
   

这样就能实现你想要的裁剪效果，竖版视频会填满水平矩形框，上下部分被裁剪，保留中间核心内容。

内容的提问来源于stack exchange，提问作者mohammad reza shabani