youtube_player_flutter自动旋转异常：横屏转竖屏无法自动触发

问题分析 #

当前实现中竖屏切横屏正常，但横屏切回竖屏时无法自动触发旋转，核心问题在于退出全屏后，系统方向偏好的设置时机和状态同步存在延迟：

• 仅依赖setState更新isAutoRotation，但build方法可能未立即执行，导致系统方向设置未及时生效
• 播放器全屏状态的更新与系统方向设置不同步，出现状态滞后

修复方案 #

1. 优化全屏切换时的方向控制

在YoutubePlayerBuilder的全屏切换回调中，直接强制设置系统方向，同时同步状态变量，避免延迟：

child: YoutubePlayerBuilder(
  onEnterFullScreen: () {
    setState(() {
      isAutoRotation = false;
      isFullScreenClick = true;
    });
    // 进入全屏立即锁定横屏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeRight,
      DeviceOrientation.landscapeLeft,
    ]);
  },
  onExitFullScreen: () {
    setState(() {
      isAutoRotation = true;
      isFullScreenClick = false;
    });
    // 退出全屏立即恢复所有方向权限
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
  },
  // 播放器其他配置代码...
)

2. 同步播放器状态与方向设置

修改_onPlayerStateChange方法，确保播放器状态变化时，实时调整系统方向，避免状态脱节：

void _onPlayerStateChange() {
  setState(() {
    isFullScreenClick = _controller.value.isFullScreen;
    // 根据当前全屏状态动态调整方向
    if (isFullScreenClick) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.landscapeRight,
        DeviceOrientation.landscapeLeft,
      ]);
    } else if (isAutoRotation) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    }
  });
}

3. 避免build过程中重复设置方向

在build方法中使用addPostFrameCallback，确保在界面渲染完成后再设置方向，避免与Flutter布局流程冲突：

@override
Widget build(BuildContext context) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    if (isAutoRotation) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ]);
    } else {
      final orientations = isFullScreenClick 
          ? [DeviceOrientation.landscapeRight, DeviceOrientation.landscapeLeft]
          : [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown];
      SystemChrome.setPreferredOrientations(orientations);
    }
  });

  // 剩余build代码...
}

原理说明 #

• 直接在全屏切换回调中调用SystemChrome.setPreferredOrientations，跳过build延迟，确保方向设置立即生效
• 同步更新isFullScreenClick状态，避免播放器状态与本地变量不一致
• 使用addPostFrameCallback确保方向设置在界面渲染完成后执行，避免干扰Flutter的布局流程

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