时间戳

首页 > 解决方案 > 如何隐藏状态栏而不影响其他屏幕？

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

问题描述

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

这是我的意思的状态栏

在此处输入图像描述

闪屏。 我使用下面的代码来隐藏状态栏 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,
        ),
      ),
    ),

标签： flutter

解决方案

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

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

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

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)

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

推荐阅读