Flutter 学习之旅之 flutter 在设备上进行全面屏设置/隐藏状态栏/隐藏导航栏设置

flutter%20%E5%9C%A8%E8%AE%BE%E5%A4%87%E4%B8%8A%E8%BF%9B%E8%A1%8C%20%E5%85%A8%E9%9D%A2%E5%B1%8F%20%E8%AE%BE%E7%BD%AE%2F%E9%9A%90%E8%97%8F%E7%8A%B6%E6%80%81%E6%A0%8F%2F%E9%9A%90%E8%97%8F%E5%AF%BC%E8%88%AA%E6%A0%8F%20%E8%AE%BE%E7%BD%AE" name="Flutter%20%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%20%E4%B9%8B%20flutter%20%E5%9C%A8%E8%AE%BE%E5%A4%87%E4%B8%8A%E8%BF%9B%E8%A1%8C%20%E5%85%A8%E9%9D%A2%E5%B1%8F%20%E8%AE%BE%E7%BD%AE%2F%E9%9A%90%E8%97%8F%E7%8A%B6%E6%80%81%E6%A0%8F%2F%E9%9A%90%E8%97%8F%E5%AF%BC%E8%88%AA%E6%A0%8F%20%E8%AE%BE%E7%BD%AE">Flutter 学习之旅之 flutter 在设备上进行全面屏设置/隐藏状态栏/隐藏导航栏设置

flutter%20%E5%9C%A8%E8%AE%BE%E5%A4%87%E4%B8%8A%E8%BF%9B%E8%A1%8C%20%E5%85%A8%E9%9D%A2%E5%B1%8F%20%E8%AE%BE%E7%BD%AE%2F%E9%9A%90%E8%97%8F%E7%8A%B6%E6%80%81%E6%A0%8F%2F%E9%9A%90%E8%97%8F%E5%AF%BC%E8%88%AA%E6%A0%8F%20%E8%AE%BE%E7%BD%AE-toc" name="tableOfContents" style="margin-left:0px">Flutter 学习之旅之 flutter 在设备上进行全面屏设置/隐藏状态栏/隐藏导航栏设置

一、简单介绍

二、全面屏

三、简单效果展示

四、简单案例实现

五、关键代码

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、全面屏

全面屏是一种现代智能手机的设计理念，其主要特点是拥有极高的屏幕占比，通常超过80%。这种设计通过减少手机正面的边框，将屏幕扩展至接近整个正面，从而在有限的机身尺寸内提供更大的显示面积，增强视觉体验。全面屏手机通常采用窄边框、无额头、无下巴或极窄下巴的设计，部分还配备屏下指纹识别、隐藏式听筒等技术，以进一步优化屏幕占比。它不仅让手机外观更加简洁美观，还为用户带来更沉浸的观影、游戏和浏览体验，是当前智能手机设计的重要趋势之一。

在 Flutter 中实现设备全面屏显示，可以通过以下代码实现：

使用 SystemChrome.setEnabledSystemUIMode 方法

这是推荐的方式，可以控制系统 UI 模式：
全屏模式（带恢复功能）：
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
全屏模式（不带恢复功能）：
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
退出全屏模式：
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
在特定页面中实现全屏

如果只想在某个页面中实现全屏，可以在页面的 initState 方法中设置全屏模式，并在 dispose 方法中退出全屏模式：
class FullScreenPage extends StatefulWidget {@override_FullScreenPageState createState() => _FullScreenPageState();
}class _FullScreenPageState extends State<FullScreenPage> {@overridevoid initState() {super.initState();// 设置全屏模式SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);}@overridevoid dispose() {// 退出全屏模式SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(body: Center(child: Text('全屏页面'),),);}
}
注意事项
在 Android 中，可能需要在 styles.xml 文件中添加以下代码，以确保全屏模式能够正确覆盖顶部区域：

xml复制
<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
如果在全屏模式下使用 Scaffold，建议设置 resizeToAvoidBottomInset: false，以避免底部留白：
Scaffold(resizeToAvoidBottomInset: false,// 其他代码
);

三、简单效果展示

四、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、初次的项目结构如下

4、不做处理打包，状态栏和导航栏正常显示

5、代码实现状态栏保留，导航栏隐藏功能，运行效果如下

6、代码实现隐藏状态栏，保留导航栏显示，运行效果如下

7、代码实现全面屏显示，运行效果如下

五、关键代码

1、状态栏保留，导航栏隐藏

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FullScreenPage(),);}
}class FullScreenPage extends StatefulWidget {@override_FullScreenPageState createState() => _FullScreenPageState();
}class _FullScreenPageState extends State<FullScreenPage> {@overridevoid initState() {super.initState();// 设置状态栏可见，导航栏隐藏SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.top], // 只保留状态栏);}@overridevoid dispose() {// 恢复默认的系统 UI 模式SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('保留状态栏的全屏页面'),),body: Center(child: Text('状态栏保留，导航栏隐藏'),),);}
}

代码说明
SystemChrome.setEnabledSystemUIMode：

使用 SystemUiMode.manual 模式，允许手动设置哪些系统 UI 元素可见。

overlays: [SystemUiOverlay.top] 表示只保留状态栏，隐藏导航栏。

dispose 方法：

在页面销毁时，恢复默认的系统 UI 模式，避免对其他页面造成影响。
状态栏样式：
如果需要进一步自定义状态栏的样式（如颜色、字体颜色等），可以使用 SystemChrome.setSystemUIOverlayStyle 方法。例如：
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent, // 状态栏透明statusBarIconBrightness: Brightness.dark, // 状态栏图标颜色（黑色）),
);
效果

状态栏会正常显示，导航栏会被隐藏。

用户可以正常看到状态栏中的时间、电量等信息，同时页面内容会扩展到屏幕底部，没有导航栏的遮挡。

2、状态栏隐藏，导航栏保留

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FullScreenPage(),);}
}class FullScreenPage extends StatefulWidget {@override_FullScreenPageState createState() => _FullScreenPageState();
}class _FullScreenPageState extends State<FullScreenPage> {@overridevoid initState() {super.initState();// 设置导航栏可见，状态栏隐藏SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.bottom], // 只保留导航栏);}@overridevoid dispose() {// 恢复默认的系统 UI 模式SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('隐藏状态栏的全屏页面'),),body: Center(child: Text('状态栏隐藏，导航栏保留'),),);}
}

代码说明

在 initState 方法中，将 overlays 参数设置为 [SystemUiOverlay.bottom]，表示只保留导航栏，隐藏状态栏。

dispose 方法用于在页面销毁时恢复默认的系统 UI 模式。

效果

状态栏会被隐藏，导航栏会正常显示。

页面内容会扩展到屏幕顶部，没有状态栏的遮挡，但导航栏仍然可用。

3、全面屏显示

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: FullScreenPage(),);}
}class FullScreenPage extends StatefulWidget {@override_FullScreenPageState createState() => _FullScreenPageState();
}class _FullScreenPageState extends State<FullScreenPage> {@overridevoid initState() {super.initState();// 隐藏状态栏和导航栏SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [], // 隐藏所有系统 UI);}@overridevoid dispose() {// 恢复默认的系统 UI 模式SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('全面屏显示'),),body: Center(child: Text('状态栏和导航栏都隐藏，全面屏显示'),),);}
}