Question

我刚刚开始使用flutter和android studio，我想知道是否有一种方法可以制作一个透明的状态栏，例如Android上的图片（不从状态栏过渡到appBar）。当我尝试设置状态栏颜色时，它的阴影不同于appBar的阴影。谢谢

Answer 1

在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());
}

Answer 2

是的，这在Android上是。

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

import 'package:flutter/services.dart';

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

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

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

Answer 3

推荐（使用 Flutter 2.0）

不要使用 docs 中提到的 AnnotatedRegion

<块引用>

应用不应将 AppBar 与自己的 AnnotatedRegion 括起来。

首选方法是使用 systemOverlayStyle 属性：

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

Answer 4

您可以将AnnotatedRegion小部件与SystemUiOverlayStyle一起使用来更改镶边样式。

import 'package:flutter/services.dart';

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

Answer 5

@ 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),
        ),
      ),
    );
  }

Answer 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));

我不确定您是否正在寻找此商品或其他商品，但这对我来说很好用

Answer 7

只需在 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
        )

抖动中的透明状态栏

7 个答案:

推荐（使用 Flutter 2.0）