使用Chewie与VideoPlayerController退出视频全屏后全局状态栏隐藏问题

嘿，我之前在项目里用Chewie搭配VideoPlayerController的时候，也碰到过一模一样的问题！这大概率是Chewie在处理全屏切换时，没正确把系统UI的状态给恢复回来，咱们可以从这两个方向来搞定它：

方案一：监听全屏状态，退出时强制恢复状态栏 #

核心思路就是主动监听Chewie的全屏状态变化，一旦检测到用户退出全屏，就直接调用Flutter的系统API强制把状态栏和导航栏恢复显示。结合你用到的Riverpod，代码可以这么写：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // 别忘了导入这个系统服务包
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:frequency_app/core/constants/app_colors.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoPlayerWidget extends ConsumerStatefulWidget {
  const VideoPlayerWidget({super.key});

  @override
  ConsumerState<VideoPlayerWidget> createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends ConsumerState<VideoPlayerWidget> {
  late VideoPlayerController _videoController;
  late ChewieController _chewieController;
  late VoidCallback _fullScreenChangeListener;

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器（这里替换成你的视频源）
    _videoController = VideoPlayerController.networkUrl(Uri.parse("你的视频地址"));
    _chewieController = ChewieController(
      videoPlayerController: _videoController,
      autoPlay: false,
      looping: false,
      fullScreenByDefault: false,
      // 其他你需要的Chewie配置
    );

    // 定义全屏状态变化的监听逻辑
    _fullScreenChangeListener = () {
      if (!_chewieController.isFullScreen) {
        // 退出全屏时，强制启用系统UI并显示状态栏、导航栏
        SystemChrome.setEnabledSystemUIMode(
          SystemUiMode.edgeToEdge, // 或者根据需求用SystemUiMode.manual
          overlays: const [SystemUiOverlay.top, SystemUiOverlay.bottom],
        );
        // 恢复状态栏的样式（和你的App主题匹配）
        SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
          statusBarColor: AppColors.transparent,
          statusBarIconBrightness: Brightness.dark, // 亮色/暗色根据主题调整
        ));
      }
    };

    // 给Chewie的全屏状态通知器添加监听
    _chewieController.isFullScreenNotifier.addListener(_fullScreenChangeListener);
  }

  @override
  void dispose() {
    // 组件销毁时一定要移除监听，避免内存泄漏
    _chewieController.isFullScreenNotifier.removeListener(_fullScreenChangeListener);
    _chewieController.dispose();
    _videoController.dispose();
    super.dispose();
  }

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

方案二：自定义Chewie全屏配置，提前指定UI恢复规则 #

有时候Chewie的默认全屏行为会漏掉UI恢复，咱们可以直接在初始化ChewieController时，通过fullScreenOptions显式配置退出全屏时的系统UI状态：

_chewieController = ChewieController(
  videoPlayerController: _videoController,
  autoPlay: false,
  looping: false,
  fullScreenByDefault: false,
  // 自定义全屏选项，指定退出时显示所有系统UI覆盖层
  fullScreenOptions: const FullScreenOptions(
    systemUiOverlay: SystemUiOverlay.values,
    deviceOrientation: [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight],
  ),
  // 其他配置...
);

这个方案更简洁，相当于提前告诉Chewie：“退出全屏的时候，把状态栏这些系统元素都给我显示回来！”

额外注意事项 #

• 不管用哪个方案，都要在组件销毁时清理监听或者控制器，避免内存泄漏
• 如果你的App支持主题切换，恢复状态栏时要对应调整图标的亮度，不然可能出现图标和背景看不清的情况
• iOS和Android的系统UI行为略有差异，建议在两种设备上都测试一遍效果

备注：内容来源于stack exchange，提问作者Khushboo Agarwal