Flutter SystemChrome 完整指南

[SystemChrome 基础概念](#SystemChrome 基础概念 "#systemchrome-%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5")
主要配置方法
[iOS 和 Android 平台差异](#iOS 和 Android 平台差异 "#ios-%E5%92%8C-android-%E5%B9%B3%E5%8F%B0%E5%B7%AE%E5%BC%82")
[与 AppBar systemOverlayStyle 的差异](#与 AppBar systemOverlayStyle 的差异 "#%E4%B8%8E-appbar-systemoverlaystyle-%E7%9A%84%E5%B7%AE%E5%BC%82")
最佳实践和注意事项
常见问题和解决方案
实际代码示例

SystemChrome 基础概念

SystemChrome 是 Flutter 中用于控制系统界面元素（如状态栏、导航栏）的核心类。它提供了全局级别的系统 UI 配置能力。

完整功能列表

1. 系统 UI 样式控制

设置系统 UI 覆盖样式 ：setSystemUIOverlayStyle()
- 控制状态栏颜色、图标亮度
- 控制导航栏颜色、图标亮度（仅Android）
- 设置导航栏分割线颜色（仅Android）

2. 系统 UI 显示模式控制

设置系统 UI 模式 ：setEnabledSystemUIMode()
- 全屏模式（隐藏所有系统 UI）
- 沉浸式模式（边缘滑动显示）
- 沉浸式粘性模式（自动隐藏）
- 边缘到边缘模式
- 手动模式（精确控制显示元素）

3. 屏幕方向控制

锁定屏幕方向 ：setPreferredOrientations()
- 强制竖屏模式
- 强制横屏模式
- 允许特定方向组合
- 恢复所有方向

4. 应用切换器控制（Android）

设置应用切换器描述 ：setApplicationSwitcherDescription()
- 设置应用在任务切换器中的标题
- 设置应用在任务切换器中的图标
- 控制应用在多任务界面中的显示

5. 系统 UI 恢复

恢复系统 UI ：当应用进入后台或需要恢复默认状态时
- 自动恢复到系统默认的 UI 状态
- 清除之前设置的自定义样式

6. 平台特定功能

iOS 特定 ：
- Home Indicator 控制
- 状态栏内容亮度控制
- Safe Area 适配
Android 特定 ：
- 导航栏完全控制
- 沉浸式模式支持
- 系统手势导航适配

核心特点

全局级别：影响整个应用的系统 UI
平台适配：自动处理 iOS 和 Android 的差异
实时生效：设置后立即应用到当前界面
状态管理：可以动态切换不同的 UI 状态

主要配置方法

1. 设置系统 UI 覆盖样式

dart 复制代码

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  // 状态栏配置
  statusBarColor: Colors.transparent,           // Android: 状态栏背景色
  statusBarIconBrightness: Brightness.light,   // Android: 状态栏图标亮度
  statusBarBrightness: Brightness.dark,        // iOS: 状态栏内容亮度
  
  // 导航栏配置 (仅 Android)
  systemNavigationBarColor: Colors.white,      // 导航栏背景色
  systemNavigationBarIconBrightness: Brightness.dark, // 导航栏图标亮度
  systemNavigationBarDividerColor: Colors.grey, // 导航栏分割线颜色
));

2. 设置系统 UI 模式

dart 复制代码

// 隐藏所有系统 UI（全屏模式）
SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual, 
  overlays: []
);

// 显示所有系统 UI
SystemChrome.setEnabledSystemUIMode(
  SystemUiMode.manual,
  overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom]
);

// 沉浸式模式（边缘滑动显示）
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

// 沉浸式粘性模式（自动隐藏）
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

// 边缘到边缘模式
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

3. 锁定屏幕方向

dart 复制代码

// 锁定竖屏
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
]);

// 锁定横屏
SystemChrome.setPreferredOrientations([
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

// 恢复所有方向
SystemChrome.setPreferredOrientations([
  DeviceOrientation.portraitUp,
  DeviceOrientation.portraitDown,
  DeviceOrientation.landscapeLeft,
  DeviceOrientation.landscapeRight,
]);

4. 设置应用切换器描述（仅 Android）

dart 复制代码

import 'package:flutter/services.dart';

// 设置应用在任务切换器中的显示信息
SystemChrome.setApplicationSwitcherDescription(
  ApplicationSwitcherDescription(
    label: '我的应用', // 应用在任务切换器中显示的标题
    primaryColor: 0xFF2196F3, // 应用的主题色（可选）
  ),
);

5. 系统 UI 状态恢复

dart 复制代码

// 恢复到系统默认状态（通常在应用退出或进入后台时调用）
void restoreSystemUI() {
  SystemChrome.setEnabledSystemUIMode(
    SystemUiMode.manual,
    overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
  );
  
  // 恢复默认的系统 UI 样式
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: null, // 使用系统默认
    systemNavigationBarColor: null, // 使用系统默认
  ));
}

// 在应用生命周期中使用
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    // 应用退出时恢复系统 UI
    restoreSystemUI();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    if (state == AppLifecycleState.paused) {
      // 应用进入后台时恢复系统 UI
      restoreSystemUI();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

iOS 和 Android 平台差异

状态栏和系统导航栏的位置分布

状态栏（Status Bar）位置

Android 平台：

位置：屏幕顶部
显示内容：时间、电量、信号强度、通知图标等
特点：
- 可以设置背景颜色 (statusBarColor)
- 可以控制图标亮度 (statusBarIconBrightness)
- 可以完全隐藏
- 支持透明效果

iOS 平台：

位置：屏幕顶部（包括刘海屏/动态岛区域）
显示内容：时间、电量、信号强度、运营商信息等
特点：
- 背景颜色由系统控制，无法自定义
- 只能控制内容亮度 (statusBarBrightness)
- 始终存在，无法完全隐藏（全屏模式下变为透明覆盖）
- 刘海屏/动态岛设备需要考虑 Safe Area

Android 平台：

位置：屏幕底部（部分设备可能在侧面）
显示内容：返回键、主页键、多任务键（虚拟按键）或手势导航区域
特点：
- 可以设置背景颜色 (systemNavigationBarColor)
- 可以控制图标亮度 (systemNavigationBarIconBrightness)
- 可以设置分割线颜色 (systemNavigationBarDividerColor)
- 可以完全隐藏
- 不同厂商可能有定制化行为

iOS 平台：

位置：iOS 没有系统导航栏概念
说明：
- iOS 使用 Home Indicator（主页指示器）在屏幕底部
- iPhone X 及以后机型使用手势导航
- 所有导航栏相关的 Flutter 配置在 iOS 上都无效

状态栏配置差异

属性	iOS	Android	说明
`statusBarColor`	❌ 无效	✅ 有效	iOS 状态栏颜色由系统控制
`statusBarBrightness`	✅ 有效	❌ 无效	iOS 专用，控制状态栏内容亮度
`statusBarIconBrightness`	❌ 无效	✅ 有效	Android 专用，控制状态栏图标亮度

导航栏配置差异

属性	iOS	Android	说明
`systemNavigationBarColor`	❌ 无效	✅ 有效	iOS 无系统导航栏概念
`systemNavigationBarIconBrightness`	❌ 无效	✅ 有效	iOS 无系统导航栏概念
`systemNavigationBarDividerColor`	❌ 无效	✅ 有效	iOS 无系统导航栏概念

系统 UI 模式差异

iOS 特点：

状态栏始终存在，无法完全隐藏
全屏模式下状态栏变为透明覆盖
刘海屏设备需要考虑 Safe Area

Android 特点：

可以完全隐藏状态栏和导航栏
支持更多的沉浸式模式
不同厂商可能有定制化行为

平台特定代码示例

dart 复制代码

import 'dart:io';

void setPlatformSpecificSystemUI() {
  if (Platform.isIOS) {
    // iOS 专用配置
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarBrightness: Brightness.dark, // iOS 用这个
    ));
  } else if (Platform.isAndroid) {
    // Android 专用配置
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light, // Android 用这个
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
  }
}

与 AppBar systemOverlayStyle 的差异

SystemChrome.setSystemUIOverlayStyle()

作用域: 全局级别
生效时机: 立即生效，影响整个应用
优先级: 较低，会被 AppBar 的设置覆盖
使用场景: 应用启动时的全局配置

AppBar.systemOverlayStyle

作用域: 页面级别
生效时机: 当该 AppBar 显示时生效
优先级: 较高，会覆盖全局设置
使用场景: 特定页面的定制化配置

代码对比

dart 复制代码

// 全局配置（在 main() 或 initState() 中）
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.blue,
  statusBarIconBrightness: Brightness.light,
));

// 页面级配置（在 AppBar 中）
AppBar(
  title: Text('页面标题'),
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 会覆盖全局设置
    statusBarIconBrightness: Brightness.dark,
  ),
)

MaterialApp 中的系统UI设置

除了上述三种方式，还有一个重要的设置方式是通过 MaterialApp 的主题配置：

MaterialApp.theme.appBarTheme.systemOverlayStyle

作用域: 全应用级别的默认设置
生效时机: 当页面的 AppBar 没有设置 systemOverlayStyle 时生效
优先级: 中等，高于 SystemChrome 但低于 AppBar 直接设置
使用场景: 统一管理整个应用的状态栏样式，支持主题切换

MaterialApp 设置的优势

全局生效：一次设置，整个应用都会应用这个样式
主题一致性：与应用的整体主题保持一致
自动适配：支持明暗主题自动切换
维护简单：避免在每个页面重复设置

实际应用示例

基础设置：

dart 复制代码

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
    ),
  ),
  home: MyHomePage(),
)

支持明暗主题切换：

dart 复制代码

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle.dark, // 浅色主题用深色状态栏
    ),
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle.light, // 深色主题用浅色状态栏
    ),
  ),
  home: MyHomePage(),
)

完整的主题配置示例：

dart 复制代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      // 浅色主题
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.blue,
          foregroundColor: Colors.white,
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light, // 白色图标
            statusBarBrightness: Brightness.dark, // iOS
          ),
        ),
      ),
      // 深色主题
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
        appBarTheme: AppBarTheme(
          backgroundColor: Colors.grey[900],
          foregroundColor: Colors.white,
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light, // 白色图标
            statusBarBrightness: Brightness.light, // iOS
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

使用场景对比

适合使用 MaterialApp 设置的情况：

整个应用需要统一的状态栏样式
需要支持明暗主题自动切换
希望减少重复代码
应用结构相对简单

需要特殊页面定制的情况：

dart 复制代码

// 大部分页面使用 MaterialApp 中的默认设置
class NormalPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('普通页面'),
        // 自动使用主题中的 systemOverlayStyle
      ),
    );
  }
}

// 特殊页面覆盖默认设置
class SpecialPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('特殊页面'),
        systemOverlayStyle: SystemUiOverlayStyle.light, // 覆盖主题设置
      ),
    );
  }
}

优先级层次

最高优先级 : AppBar.systemOverlayStyle
中等优先级 : MaterialApp.theme.appBarTheme.systemOverlayStyle 和 AnnotatedRegion<SystemUiOverlayStyle>
最低优先级 : SystemChrome.setSystemUIOverlayStyle()

最佳实践和注意事项

1. 初始化时机

dart 复制代码

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 在 runApp 之前设置全局样式
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  
  runApp(MyApp());
}

2. 响应主题变化

dart 复制代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        appBarTheme: AppBarTheme(
          systemOverlayStyle: SystemUiOverlayStyle.dark, // 浅色主题
        ),
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        appBarTheme: AppBarTheme(
          systemOverlayStyle: SystemUiOverlayStyle.light, // 深色主题
        ),
      ),
    );
  }
}

3. 处理页面切换

dart 复制代码

class MyPageRoute extends PageRoute {
  @override
  Widget buildPage(BuildContext context, Animation<double> animation, 
                   Animation<double> secondaryAnimation) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
      child: YourPageWidget(),
    );
  }
}

4. 安全区域处理

dart 复制代码

Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
      child: YourContent(),
    ),
  );
}

常见问题和解决方案

1. SystemChrome.setSystemUIOverlayStyle 无效问题 ⭐

问题 : 设置了 SystemChrome.setSystemUIOverlayStyle() 但是不生效，而在 AppBar 中设置 systemOverlayStyle 才生效。

根本原因:

AppBar 内部使用 AnnotatedRegion<SystemUiOverlayStyle> 包装
AnnotatedRegion 的优先级高于 SystemChrome.setSystemUIOverlayStyle()
Flutter 框架按优先级应用最新的系统 UI 样式

优先级顺序 (从高到低):

AppBar.systemOverlayStyle (最高优先级)
AnnotatedRegion<SystemUiOverlayStyle>
SystemChrome.setSystemUIOverlayStyle() (最低优先级)

解决方案:

方案1: 移除 AppBar 中的 systemOverlayStyle

dart 复制代码

// 在应用启动时设置全局样式
void main() {
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark,
  ));
  runApp(MyApp());
}

// AppBar 中不设置 systemOverlayStyle
AppBar(
  title: Text('标题'),
  // 移除 systemOverlayStyle 属性
)

方案2: 使用 AnnotatedRegion 包装页面

dart 复制代码

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Text('标题'),
          // 不设置 systemOverlayStyle
        ),
        body: YourContent(),
      ),
    );
  }
}

方案3: 在 MaterialApp 的主题中统一设置

dart 复制代码

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
      ),
    ),
  ),
  home: MyHomePage(),
)

方案4: 延迟设置 SystemChrome (不推荐)

dart 复制代码

@override
void initState() {
  super.initState();
  // 延迟到下一帧执行
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ));
  });
}

方案5: 条件性设置 AppBar.systemOverlayStyle

dart 复制代码

AppBar(
  title: Text('标题'),
  systemOverlayStyle: _shouldOverrideSystemUI() 
      ? SystemUiOverlayStyle(
          statusBarColor: Colors.blue,
          statusBarIconBrightness: Brightness.light,
        )
      : null, // null 时不覆盖全局设置
)

2. 状态栏颜色在某些设备上不生效

问题: 在某些 Android 设备上状态栏颜色设置不生效

解决方案:

dart 复制代码

// 确保在 MaterialApp 之前设置
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  
  // 延迟一帧确保生效
  await Future.delayed(Duration.zero);
  
  runApp(MyApp());
}

2. iOS 键盘遮挡问题

问题: iOS 数字键盘没有完成按钮

解决方案:

dart 复制代码

TextField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'[0-9.]')),
  ],
  // 添加完成按钮
  onEditingComplete: () {
    FocusScope.of(context).unfocus();
  },
)

3. 全屏模式下的交互问题

问题: 全屏模式下用户无法访问系统功能

解决方案:

dart 复制代码

// 使用沉浸式模式而不是完全隐藏
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

// 或者提供退出全屏的按钮
IconButton(
  icon: Icon(Icons.fullscreen_exit),
  onPressed: () {
    SystemChrome.setEnabledSystemUIMode(
      SystemUiMode.manual,
      overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
    );
  },
)

4. 状态栏文字可读性问题

问题: 状态栏文字与背景颜色对比度不足

解决方案:

dart 复制代码

// 动态调整状态栏亮度
SystemUiOverlayStyle getSystemUiOverlayStyle(Color backgroundColor) {
  // 计算背景颜色亮度
  final brightness = ThemeData.estimateBrightnessForColor(backgroundColor);
  
  return SystemUiOverlayStyle(
    statusBarColor: backgroundColor,
    statusBarIconBrightness: brightness == Brightness.dark 
        ? Brightness.light 
        : Brightness.dark,
    statusBarBrightness: brightness == Brightness.dark 
        ? Brightness.light 
        : Brightness.dark,
  );
}

实际代码示例

当前项目中的使用

基于您当前项目 lib/main.dart 中的代码，您已经在 AppBar 中正确使用了 systemOverlayStyle：

dart 复制代码

AppBar(
  title: Text("WhatsApp"),
  systemOverlayStyle: SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.light,
  ),
  // ... 其他配置
)

改进建议

dart 复制代码

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late TabController tabController;
  
  @override
  void initState() {
    super.initState();
    tabController = TabController(vsync: this, length: 3);
    
    // 设置全局系统 UI 样式
    _setSystemUIOverlayStyle();
  }
  
  void _setSystemUIOverlayStyle() {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark, // iOS
      systemNavigationBarColor: Colors.white, // Android
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        appBarTheme: AppBarTheme(
          // 全局 AppBar 样式
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarColor: Colors.transparent,
            statusBarIconBrightness: Brightness.light,
            statusBarBrightness: Brightness.dark,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("WhatsApp"),
          // 可以移除这里的 systemOverlayStyle，使用主题中的全局设置
          bottom: TabBar(
            controller: tabController,
            isScrollable: true,
            tabs: [
              Tab(icon: Icon(Icons.camera_alt)),
              Tab(child: Text("CHATS")),
              Tab(child: Text("STATUS")),
            ],
          ),
        ),
        // ... 其他代码
      ),
    );
  }
  
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }
}

完整的多平台适配示例

dart 复制代码

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

class SystemUIHelper {
  static void setSystemUIOverlayStyle({
    Color? statusBarColor,
    Brightness? statusBarIconBrightness,
    Color? systemNavigationBarColor,
    Brightness? systemNavigationBarIconBrightness,
  }) {
    SystemUiOverlayStyle overlayStyle;
    
    if (Platform.isIOS) {
      overlayStyle = SystemUiOverlayStyle(
        statusBarBrightness: statusBarIconBrightness == Brightness.light 
            ? Brightness.dark 
            : Brightness.light,
      );
    } else {
      overlayStyle = SystemUiOverlayStyle(
        statusBarColor: statusBarColor ?? Colors.transparent,
        statusBarIconBrightness: statusBarIconBrightness ?? Brightness.dark,
        systemNavigationBarColor: systemNavigationBarColor ?? Colors.white,
        systemNavigationBarIconBrightness: 
            systemNavigationBarIconBrightness ?? Brightness.dark,
      );
    }
    
    SystemChrome.setSystemUIOverlayStyle(overlayStyle);
  }
  
  static void setFullScreen(bool fullScreen) {
    if (fullScreen) {
      SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [],
      );
    } else {
      SystemChrome.setEnabledSystemUIMode(
        SystemUiMode.manual,
        overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom],
      );
    }
  }
}

总结

SystemChrome 提供全局级别的系统 UI 控制
AppBar.systemOverlayStyle 提供页面级别的系统 UI 控制
平台差异 需要针对 iOS 和 Android 分别处理
优先级 AppBar 设置会覆盖全局设置
最佳实践 在应用启动时设置全局样式，在特定页面使用 AppBar 样式覆盖

通过合理使用这些 API，可以实现一致且美观的系统 UI 体验。

Flutter SystemChrome 完整指南