颤振中的透明状态栏

Posted 2023-03-12

【中文标题】颤振中的透明状态栏

【英文标题】：Transparent status bar in flutter

【发布时间】：2019-03-17 20:32:45

【问题描述】：

我刚开始使用flutter和android studio，我想知道是否有办法在Android上制作一个像图片一样的透明状态栏（没有从状态栏到appBar的过渡）。当我尝试设置状态栏颜色时，它的颜色与 appBar 不同。 谢谢

【参考方案1】：

您可以使用 AnnotatedRegion 小部件和 SystemUiOverlayStyle 来更改 chrome 样式。

import 'package:flutter/services.dart';

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
      child: Scaffold(...),
    );
  

您可以阅读更多关于 SystemUiOverlayStyle here 的功能。

【参考方案2】：

是的，这是可能的Android。

为此，您可以使用SystemChrome。该类提供了一个setSystemUIOverlayStyle 方法，您可以像这样使用它：

import 'package:flutter/services.dart';

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));

请记住，这仅适用于等于或大于 Android M 的 Android 版本，并且您需要通过避免 Scaffold 自动添加的填充来在状态栏下方绘制。您可以使用：

...body: SafeArea(top: false, child: ...

【参考方案3】：

您也可以在 main.dart 文件中运行应用程序之前广泛应用它：

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

void main()
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // transparent status bar
  ));
  runApp(MyApp());

【参考方案4】：

@sander-dalby-larsen 解决方案完美运行，但是状态栏图标颜色成为问题。以下解决方案使状态栏transparent 和状态栏图标和导航栏颜色为black。

@override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle(
          statusBarColor: Colors.transparent, // transparent status bar
          systemNavigationBarColor: Colors.black, // navigation bar color
          statusBarIconBrightness: Brightness.dark, // status bar icons' color
          systemNavigationBarIconBrightness: Brightness.dark, //navigation bar icons' color
        ),
        child: Scaffold(
          body: _getBody(context),
        ),
      ),
    );
  

【讨论】：

这解决了一个问题并产生了另一个问题。如果您导航到另一个屏幕并返回，它会再次恢复。所以状态栏是透明的，但状态栏图标又是白色的。

这是一个更好的解决方案，特别是如果您在 main.dart 中返回 StreamProvicer

@FaizanMubasher 你找到解决后退导航问题的方法了吗？

【参考方案5】：

推荐（使用 Flutter 2.0）

不要使用AnnotatedRegion 中提到的docs

应用程序不应使用自己的 AnnotatedRegion 封装 AppBar。

首选方式是使用systemOverlayStyle属性：

Scaffold(
  appBar: AppBar(
    backwardsCompatibility: false,
    systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
  ),
)

【参考方案6】：

我正在寻找相同的解决方案，我找到了一种方法来做到这一点 transparent statusbar icons 在您的 Widget build(BuildContext context) 中，只需添加以下几行，

当使用深色主题时，它会使状态栏像透明，图标变成白色

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.light));

浅色主题也是如此

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
    statusBarIconBrightness: Brightness.dark,
    statusBarBrightness: Brightness.dark));

我不确定您是否正在寻找这个或不同的东西，但这对我来说非常好

【参考方案7】：

这将有助于使您的状态栏透明

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark, // dark text for status bar
      statusBarColor: Colors.transparent));

喜欢：

【参考方案8】：

只需在 Scafold body 参数周围进行填充。

Scaffold(
         body: Padding(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top), //this
            child: Widget
        )

如果你的脚手架有 appBar

Scaffold(        
      appBar: AppBar(
                brightness: Brightness.dark, //this
      body: Padding(
                padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: Widget
        )