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

发布于：2025-03-13 ⋅ 阅读:(13) ⋅ 点赞:(0)

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

目录

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> {
  @override
  void initState() {
    super.initState();
    // 设置全屏模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  }

  @override
  void dispose() {
    // 退出全屏模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FullScreenPage(),
    );
  }
}

class FullScreenPage extends StatefulWidget {
  @override
  _FullScreenPageState createState() => _FullScreenPageState();
}

class _FullScreenPageState extends State<FullScreenPage> {
  @override
  void initState() {
    super.initState();
    // 设置状态栏可见，导航栏隐藏
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.top], // 只保留状态栏
    );
  }

  @override
  void dispose() {
    // 恢复默认的系统 UI 模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('保留状态栏的全屏页面'),
      ),
      body: Center(
        child: Text('状态栏保留，导航栏隐藏'),
      ),
    );
  }
}

代码说明

  1. SystemChrome.setEnabledSystemUIMode：

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

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

  2. dispose 方法：

    • 在页面销毁时，恢复默认的系统 UI 模式，避免对其他页面造成影响。

  3. 状态栏样式：

    • 如果需要进一步自定义状态栏的样式（如颜色、字体颜色等），可以使用 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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FullScreenPage(),
    );
  }
}

class FullScreenPage extends StatefulWidget {
  @override
  _FullScreenPageState createState() => _FullScreenPageState();
}

class _FullScreenPageState extends State<FullScreenPage> {
  @override
  void initState() {
    super.initState();
    // 设置导航栏可见，状态栏隐藏
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.bottom], // 只保留导航栏
    );
  }

  @override
  void dispose() {
    // 恢复默认的系统 UI 模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FullScreenPage(),
    );
  }
}

class FullScreenPage extends StatefulWidget {
  @override
  _FullScreenPageState createState() => _FullScreenPageState();
}

class _FullScreenPageState extends State<FullScreenPage> {
  @override
  void initState() {
    super.initState();
    // 隐藏状态栏和导航栏
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [], // 隐藏所有系统 UI
    );
  }

  @override
  void dispose() {
    // 恢复默认的系统 UI 模式
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('全面屏显示'),
      ),
      body: Center(
        child: Text('状态栏和导航栏都隐藏，全面屏显示'),
      ),
    );
  }
}

代码说明

  • 在 initState 方法中，将 overlays 参数设置为空列表 []，表示隐藏状态栏和导航栏。

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

效果

  • 状态栏和导航栏都会被隐藏，页面内容会扩展到整个屏幕，实现全面屏显示。

参考文献：

1、【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )-腾讯云开发者社区-腾讯云

2、flutter 设置全屏 和隐藏状态栏和导航栏_flutter 隐藏状态栏-CSDN博客

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布