Flutter设置底部导航栏白底深图标 后台切回后样式失效如何解决

问题原因 #

这个问题本质是Flutter的系统UI样式管理和应用生命周期触发的样式重置导致的：

1. 你直接在build方法中调用SystemChrome.setSystemUIOverlayStyle，而MaterialApp自带的主题配置会在页面重建、应用切回前台等场景下自动覆盖你手动设置的样式
2. 应用退到后台时系统可能会修改全局导航栏样式，回到前台后Flutter没有自动重新应用你的自定义配置

解决方法 #

方案1：将系统样式配置放到ThemeData中（推荐） #

直接在MaterialApp的ThemeData里声明systemOverlayStyle，让Flutter框架全局管理这个样式，避免被自动重置，修改代码如下：

@override
Widget build(BuildContext context) {
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);

  return ChangeNotifierProvider(
    create: (ctx) => GBUserInfo(),
    child: MaterialApp(
      title: 'test',
      debugShowCheckedModeBanner: false,
      
      theme: ThemeData(
        // 新增这部分配置，原来的其余主题配置保留即可
        systemOverlayStyle: SystemUiOverlayStyle.light.copyWith(
          systemNavigationBarColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.dark,
        ),
        primarySwatch: Colors.blue,
        backgroundColor: Colors.pink,
        accentColor: Colors.yellow,
        accentColorBrightness: Brightness.dark,
        buttonTheme: ButtonTheme.of(context).copyWith(
          buttonColor: Colors.blue,
          textTheme: ButtonTextTheme.primary,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20),
          ),
        ),
      ),
      // 其余代码保持不变
      home: StreamBuilder(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (ctx, userSnapshot) {
            if (userSnapshot.connectionState == ConnectionState.waiting) {
              return SplashScreen();
            }
            if (userSnapshot.hasData) {
              return ZonesScreen();
            }
            return Login();
          }),
      routes: {},
    ),
  );
}

方案2：监听应用生命周期主动重置样式 #

如果方案1不生效（比如存在子页面单独修改了系统UI样式的场景），可以增加应用生命周期监听，在应用切回前台时重新应用你的自定义样式：

1. 给MyApp混入WidgetsBindingObserver，监听生命周期状态
2. 在应用恢复到前台时重新调用setSystemUIOverlayStyle
   示例代码：

class MyApp extends StatelessWidget with WidgetsBindingObserver {
  @override
  Widget build(BuildContext context) {
    // 注册生命周期监听
    WidgetsBinding.instance.addObserver(this);
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    _setSystemStyle();
    // 其余原有代码...
  }

  // 生命周期变化回调
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 应用切回前台时重新设置样式
    if (state == AppLifecycleState.resumed) {
      _setSystemStyle();
    }
  }

  // 抽离公共的样式设置方法
  void _setSystemStyle() {
    var mySystemTheme= SystemUiOverlayStyle.light.copyWith(
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark
    );
    SystemChrome.setSystemUIOverlayStyle(mySystemTheme);
  }
}

注意事项 #

• 检查所有子页面是否有调用SystemChrome.setSystemUIOverlayStyle的代码，如果有要统一和全局样式保持一致，避免局部修改覆盖全局配置
• 安卓12及以上系统对系统导航栏样式有额外限制，可在安卓原生配置的styles.xml中添加<item name="android:enforceNavigationBarContrast">false</item>关闭系统强制对比度限制，避免样式被系统修改

内容的提问来源于stack exchange，提问作者mike hennessy