flutter如何实现沉浸式全屏

在Flutter中如何实现真正的沉浸式全屏效果？我尝试过SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky)，但在部分Android设备上状态栏和导航栏仍然会偶尔显示。有没有更稳定的实现方案？同时想请教iOS端是否也能实现类似效果，以及如何处理全屏模式下与应用栏（AppBar）的兼容性问题？

2 回复

在Flutter中，使用SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky)实现沉浸式全屏。此方法隐藏状态栏和导航栏，用户滑动屏幕边缘可临时显示。

更多关于flutter如何实现沉浸式全屏的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中实现沉浸式全屏（隐藏状态栏和导航栏）可以通过以下步骤完成：

1. 添加依赖

在 pubspec.yaml 中添加 flutter/services（通常已内置，无需额外添加）：

dependencies:
  flutter:
    sdk: flutter

2. 设置全屏模式

在 main.dart 的 main() 函数中，使用 SystemChrome 设置全屏：

import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置沉浸式全屏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  runApp(MyApp());
}

3. 可选配置

  • 隐藏状态栏和导航栏：

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

    此模式会隐藏系统界面，用户从屏幕边缘滑动可临时显示。

  • 仅隐藏状态栏：

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

  • 手动控制界面元素（不推荐普通使用）：

    SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [SystemUiOverlay.top], // 仅保留状态栏
);

4. 注意事项

  • Android 配置：在 android/app/src/main/AndroidManifest.xml 中确保 Activity 主题包含全屏属性：
    <activity
  android:theme="@style/LaunchTheme"
  android:windowSoftInputMode="adjustResize">
  <!-- 添加全屏支持 -->
  <meta-data
    android:name="android.app.immersive"
    android:value="true"/>
</activity>
  • iOS：沉浸式模式在 iOS 上默认支持，但需测试不同设备。

5. 退出全屏

恢复系统界面：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

通过以上步骤即可实现沉浸式全屏体验，适用于视频播放、游戏等场景。

回到顶部