Flutter：通过悬浮按钮实现状态栏与导航栏的显示/隐藏切换

要实现点击悬浮按钮切换状态栏和导航栏的显示、隐藏（默认显示），可以通过以下步骤完成：

核心思路 #

• 用布尔变量追踪状态栏/导航栏的可见状态，默认设为true（显示状态）
• 点击悬浮按钮时切换变量取值，根据新状态调用对应的显示/隐藏方法
• 借助SystemChrome提供的API控制系统UI层的显示

完整代码示例 #

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const ScaffoldExample(),
    );
  }
}

class ScaffoldExample extends StatefulWidget {
  const ScaffoldExample({super.key});

  @override
  State<ScaffoldExample> createState() => _ScaffoldExampleState();
}

class _ScaffoldExampleState extends State<ScaffoldExample> {
  // 默认状态栏/导航栏处于显示状态
  bool _isSystemUiVisible = true;

  // 隐藏系统UI（状态栏+导航栏）
  Future<void> _hideSystemUi() => SystemChrome.setEnabledSystemUIOverlays([]);

  // 显示系统UI（状态栏+导航栏）
  Future<void> _showSystemUi() => SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("UI切换示例")),
      body: const Center(child: Text("点击悬浮按钮切换状态栏/导航栏")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isSystemUiVisible = !_isSystemUiVisible;
          });
          // 根据当前状态调用对应方法
          _isSystemUiVisible ? _showSystemUi() : _hideSystemUi();
        },
        child: Icon(_isSystemUiVisible ? Icons.visibility_off : Icons.visibility),
      ),
    );
  }
}

关键说明 #

• 必须导入flutter/services.dart包才能使用SystemChrome类
• setEnabledSystemUiOverlays([])会隐藏所有系统UI层（包含状态栏和导航栏）
• SystemUiOverlay.values包含所有系统UI元素，调用后会恢复状态栏和导航栏的显示
• 通过setState更新状态变量，确保悬浮按钮的图标同步切换，给用户直观的交互反馈

内容的提问来源于stack exchange，提问作者Bilal Mukhtiar