如何隐藏状态栏而不影响其他屏幕？

Question

我正在设计一个应用程序，其中有几个屏幕将有一个具有特殊样式的状态栏。但是，在 初始屏幕，这是应用程序的第一个屏幕。我正在设计它没有状态栏。但它也适用于所有其他屏幕，即使它们具有具有独特设计样式的状态栏，特别是我在下面提供代码示例的 数字屏幕。

我的意思是状态栏

启动画面。 我使用下面的代码来隐藏状态栏 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

// ignore_for_file: prefer_const_constructors

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:online_croceries/constants/assets.dart';
import 'package:online_croceries/data/sharedpref/constants/preferences.dart';
import 'package:online_croceries/utils/routes/routes.dart';
import 'package:shared_preferences/shared_preferences.dart';

class SplashScreen extends StatefulWidget {
SplashScreen({Key? key}) : super(key: key);

@override
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {

@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    decoration: BoxDecoration(
      color: Color.fromRGBO(83, 177, 117, 1),
    ),
    child: Center(
      child: Container(
        width: 350,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(Assets.iconLogo),
          ),
        ),
      ),
    ),
  ),
);
}

@override
void initState() {
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
super.initState();
starTimer();
}

starTimer() {
var _duration = Duration(milliseconds: 2000);
return Timer(_duration, navigate);
}

navigate() async {
SharedPreferences preferences = await SharedPreferences.getInstance();

if (preferences.getBool(Preferences.is_logged_in) ?? false) {
  Navigator.of(context).pushReplacementNamed(Routes.welcome);
} else {
  Navigator.of(context).pushReplacementNamed(Routes.welcome);
}
}
}

主界面，我用它做根路由器

child: Observer(
    builder: (context) {
      return 
        
        MaterialApp(
          title: 'Flutter Demo',
          home: SplashScreen(),
          routes: Routes.routes,
          locale: Locale(_languageStore.locale),
          supportedLocales: _languageStore.supportedLanguages.map((e) => 
          Locale(e.locale!, e.code)).toList(),
          localizationsDelegates: [AppLocalizations.delegate]
          // home: APIUsing(),
          );
    },
    name: "global-observer",
  ),

NumberScreen，用于登录。 TransparentAppBar 是我用来创建具有特殊样式的状态栏的自定义小部件

Widget build(BuildContext context) {
int backDropBlur = 30;
return Scaffold(
    appBar: TransparentAppBar(
      transTitle: "",
      leadingIcon: IconButton(
        onPressed: () {
          Navigator.of(context).pop();
        },
        icon: Icon(
          Icons.chevron_left,
        ),
      ),
    ),

Answer 1

在我的项目中，我使用以下（使用亮度已过时） 没有 AppBar：

return AnnotatedRegion<SystemUiOverlayStyle>(
            //Set status bar icon color
            value: your_condition
                ? SystemUiOverlayStyle.dark.copyWith(
                    statusBarColor: your_color,
                    //statusBarIconBrightness: Brightness.light,
                  )
                : SystemUiOverlayStyle.light.copyWith(
                    statusBarColor: your_color,
                    //statusBarIconBrightness: Brightness.light,
                  ),
            child: your_widget);

使用 AppBar：

return AppBar(
    elevation: 0.0,
    systemOverlayStyle: your_condition ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
    backgroundColor: your_color,
);

您可以结合使用上述两种方法来实现您的目标

Answer 2

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

上面的代码行在SplashScreen的initState函数里面，你可以在我上面提供的代码中很容易地看到它。它可以帮助我们关闭状态栏，这是需要注意的。关闭状态栏后，无论您是否在其他屏幕上使用它，都不会再次显示。

所以为了让下一个屏幕有状态栏，SplashScreen之后的下一个屏幕必须重新打开状态栏。在我的项目中，下一个屏幕 SplashScreen 是 WelcomeScreen。我用下面一行简单的代码打开它，下面我写代码的地方和我在SplashScreen上关闭它的地方是一样的。

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)

或者，如果您想要一种更简洁的方式，让显示状态栏的代码行直接返回到 SplashScreen 屏幕中，而不是 initState() 它将是在 dispose() 函数中，