Flutter中Chewie播放器仅全屏时允许横屏的实现需求

要实现仅Chewie播放器全屏时切换横屏，应用默认竖屏且页面主体不旋转的效果，只需通过动态控制系统屏幕方向+监听Chewie全屏状态来实现，具体步骤如下：

1. 导入依赖包 #

确保已导入Flutter的系统服务包：

import 'package:flutter/services.dart';

2. 页面初始化时锁定竖屏 #

在播放器所在页面的initState中设置默认竖屏方向，确保应用启动后始终保持竖屏：

@override
void initState() {
  super.initState();
  // 锁定默认竖屏（上下方向）
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
}

3. 封装CustomVideoPlayer并监听全屏状态 #

修改你的CustomVideoPlayer组件，添加Chewie全屏状态监听，动态切换系统屏幕方向：

class CustomVideoPlayer extends StatefulWidget {
  final String url;
  const CustomVideoPlayer({super.key, required this.url});

  @override
  State<CustomVideoPlayer> createState() => _CustomVideoPlayerState();
}

class _CustomVideoPlayerState extends State<CustomVideoPlayer> {
  late ChewieController _chewieController;
  late VideoPlayerController _videoPlayerController;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    _videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(widget.url));
    // 初始化Chewie控制器并添加全屏监听
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: false,
      looping: false,
      fullscreenListenable: ValueNotifier(false),
    )..addListener(_handleFullscreenChange);
  }

  // 处理全屏状态变化
  void _handleFullscreenChange() {
    if (_chewieController.isFullScreen) {
      // 进入全屏：允许横屏（左右方向）
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    } else {
      // 退出全屏：恢复竖屏锁定
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
    }
  }

  @override
  void dispose() {
    // 销毁控制器资源
    _chewieController.dispose();
    _videoPlayerController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Chewie(controller: _chewieController);
  }
}

4. 页面销毁时恢复竖屏 #

在播放器所在页面的dispose方法中再次锁定竖屏，防止用户退出页面后系统方向仍处于横屏状态：

@override
void dispose() {
  // 页面销毁时强制恢复竖屏
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]);
  super.dispose();
}

效果说明 #

• 应用默认始终保持竖屏，页面下方的推荐列表不会随播放器旋转
• 点击Chewie的全屏按钮时，系统自动切换为横屏，播放器占满整个屏幕
• 退出全屏后，系统立即恢复竖屏状态，页面布局不受影响

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