Flutter中setEnabledSystemUIOverlays与setPreferredOrientation的页面返回状态恢复问题

嘿，这个问题我熟！之前做视频播放器的时候也碰到过，其实核心就是离开视频页面时把系统设置复原，我给你一步步讲怎么实现：

第一步：保存进入视频页面前的原始状态 #

在视频页面的State类里，先定义两个变量用来存原来的系统UI覆盖和屏幕方向：

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

class VideoPage extends StatefulWidget {
  @override
  _VideoPageState createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  // 保存原始的系统UI设置和屏幕方向
  List<SystemUiOverlay>? _originalSystemOverlays;
  Orientation? _originalOrientation;

  @override
  void initState() {
    super.initState();
    // 页面初始化时，先把当前的系统状态存下来
    _originalSystemOverlays = SystemChrome.enabledSystemUIOverlays;
    _originalOrientation = MediaQuery.of(context).orientation;

    // 应用视频页需要的设置（这里替换成你的需求配置）
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); // 比如只保留底部导航栏
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
  }

第二步：离开页面时恢复原始状态 #

这里有两种场景需要处理：用户按物理返回键、页面被销毁（比如Navigator.pop后），我们可以用两种方式确保覆盖所有情况：

方式1：用dispose()方法（页面销毁时自动触发） #

在State类里重写dispose方法，页面被销毁时自动恢复设置：

@override
  void dispose() {
    _restoreOriginalSettings();
    super.dispose();
  }

方式2：用WillPopScope拦截返回事件（处理物理返回键） #

如果怕dispose没触发（比如某些特殊场景），可以用WillPopScope包裹页面内容，拦截返回操作先恢复设置：

@override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        _restoreOriginalSettings();
        return true; // 允许返回首页
      },
      child: Scaffold(
        body: Stack(
          children: [
            // 你的视频播放器组件
            VideoPlayerWidget(),
            // 自定义控件层
            CustomVideoControls(),
          ],
        ),
      ),
    );
  }

第三步：封装恢复逻辑的工具方法 #

把恢复设置的代码抽成一个单独的方法，方便复用：

void _restoreOriginalSettings() {
    // 恢复系统UI覆盖
    if (_originalSystemOverlays != null) {
      SystemChrome.setEnabledSystemUIOverlays(_originalSystemOverlays!);
    }
    // 恢复屏幕方向
    if (_originalOrientation != null) {
      SystemChrome.setPreferredOrientations(
        _originalOrientation == Orientation.portrait
            ? [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]
            : [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight],
      );
    }
  }

为什么这么做？ #

因为进入视频页时我们保存了用户进入前的系统状态，不管是页面被销毁还是用户主动返回，都能精准恢复到之前的样子，不会让首页还保持视频页的全屏或固定方向状态。

补充一点：如果你的视频页是通过Navigator.push跳转的，也可以在跳转的then回调里恢复，但这种方式不如在视频页内部处理更封装——毕竟视频页的状态应该由自己来管理嘛～

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