Flutter中如何居中裁剪Widget？VideoPlayer全屏适配问题排查

我明白你想要实现的效果：让VideoPlayer全屏展示，同时保持原视频的宽高比，自动裁剪掉上下或左右超出屏幕的部分，而且之前用FittedBox的尝试导致VideoPlayer消失了——这大概率是因为视频控制器还未初始化时，获取到的size是Size.zero，导致FittedBox没有可渲染的内容。

下面给你两种可靠的实现方式，都能完美实现居中裁剪的需求：

方法一：使用Stack + Positioned.fill + FittedBox #

这种方式最直观，利用FittedBox的BoxFit.cover属性自动按比例缩放并裁剪超出部分，同时Stack和Positioned.fill确保VideoPlayer占满父容器：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class FullScreenVideoPlayer extends StatefulWidget {
  final VideoPlayerController controller;

  const FullScreenVideoPlayer({super.key, required this.controller});

  @override
  State<FullScreenVideoPlayer> createState() => _FullScreenVideoPlayerState();
}

class _FullScreenVideoPlayerState extends State<FullScreenVideoPlayer> {
  @override
  void initState() {
    super.initState();
    // 监听控制器状态，确保尺寸变化时UI同步更新
    widget.controller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;

    return Scaffold(
      backgroundColor: Colors.black,
      body: widget.controller.value.isInitialized
          ? Stack(
              children: [
                Positioned.fill(
                  child: FittedBox(
                    fit: BoxFit.cover,
                    alignment: Alignment.center, // 强制居中裁剪
                    child: SizedBox(
                      width: widget.controller.value.size.width,
                      height: widget.controller.value.size.height,
                      child: VideoPlayer(widget.controller),
                    ),
                  ),
                ),
              ],
            )
          : const Center(child: CircularProgressIndicator()), // 未初始化时显示加载动画
    );
  }
}

方法二：使用AspectRatio + ClipRect #

如果你更倾向于明确控制宽高比匹配逻辑，这种方式也很有效：

@override
Widget build(BuildContext context) {
  final screenSize = MediaQuery.of(context).size;
  final videoAspectRatio = widget.controller.value.aspectRatio;
  final screenAspectRatio = screenSize.width / screenSize.height;

  return Scaffold(
    backgroundColor: Colors.black,
    body: widget.controller.value.isInitialized
        ? ClipRect(
            child: AspectRatio(
              aspectRatio: screenAspectRatio, // 强制匹配屏幕宽高比
              child: FittedBox(
                fit: BoxFit.cover,
                alignment: Alignment.center,
                child: SizedBox(
                  width: widget.controller.value.size.width,
                  height: widget.controller.value.size.height,
                  child: VideoPlayer(widget.controller),
                ),
              ),
            ),
          )
        : const Center(child: CircularProgressIndicator()),
  );
}

关键注意点： #

• 必须判断控制器初始化状态：在controller.value.isInitialized为true之前，不要渲染VideoPlayer，否则会因为尺寸为0导致Widget消失；
• BoxFit.cover的核心作用：它会保持子Widget的宽高比，同时缩放至完全覆盖父容器，超出的部分会被自动裁剪，默认就是居中对齐；
• 监听控制器状态：添加addListener(() => setState(() {}))可以确保视频尺寸变化时（比如切换视频源），UI能及时更新。

这样修改后，你的VideoPlayer就能正常全屏显示，同时按照原视频比例居中裁剪超出部分啦！

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