如何在Flutter中永久固定屏幕方向 解决Youtube播放器全屏返回后横屏异常

问题原因 #

youtube_player_flutter插件在进入全屏播放状态时，会修改全局的设备方向配置以适配横屏播放，但是该插件不会在退出全屏/页面销毁时自动重置回应用原本的方向设置，因此在全屏状态下直接返回页面A时，全局方向配置仍然是横屏，就会导致页面A也变成横屏显示。 #

解决方案 #

方案1：页面生命周期兜底重置 #

在页面B的dispose生命周期回调中强制重置设备方向，只要页面销毁（用户返回页面A）就会触发方向重置，实现成本最低：

import 'package:flutter/services.dart';

@override
void dispose() {
  // 强制重置为竖屏向上，和main函数中预设的配置保持一致
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  super.dispose();
}

重复调用同配置的setPreferredOrientations不会产生额外性能问题，非全屏状态下返回也不会有副作用

方案2：监听播放器状态实时重置 #

如果需要在用户退出播放器全屏时就立刻恢复竖屏，不需要等到页面返回，可以监听播放器的全屏状态变更：

import 'package:flutter/services.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

late YoutubePlayerController _ytController;

@override
void initState() {
  super.initState();
  _ytController = YoutubePlayerController(
    initialVideoId: "替换为你的视频ID",
    flags: const YoutubePlayerFlags(
      autoPlay: false,
    ),
  );
  // 监听播放器状态变化
  _ytController.addListener(() {
    if (!_ytController.value.isFullScreen) {
      // 退出全屏时立刻重置为竖屏
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
      ]);
    }
  });
}

@override
void dispose() {
  _ytController.dispose();
  // 兜底重置，避免用户在全屏状态下直接返回页面
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  super.dispose();
}

两种方案可以组合使用，生命周期兜底可以覆盖所有异常场景下方向未恢复的问题

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