flutter 透明状态栏在扑动

f1tvaqid  于 2022-11-17  发布在  Flutter
关注(0)|答案(9)|浏览(204)

我刚开始使用flutter和android studio,我想知道是否有一种方法可以让一个透明的状态栏像Android上的图片一样(没有从状态栏到应用栏的过渡)。当我试图设置状态栏的颜色时,它得到了一个不同于应用栏的阴影。谢谢

jhdbpxl9

jhdbpxl91#

您可以将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(...),
    );
  }
}

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

bkhjykvo

bkhjykvo2#

是的,* 在Android* 上可以做到这一点。
要做到这一点,你可以使用SystemChrome。该类提供了一个setSystemUIOverlayStyle方法,你可以这样使用它:

import 'package:flutter/services.dart';

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

请记住,这只适用于等于或高于Android M的Android版本,并且您需要在状态栏下方绘制,以避免Scaffold自动添加的填充。您可以使用以下命令来完成此操作:

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

5ssjco0h3#

您也可以在运行主.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());
}
c6ubokkw

c6ubokkw4#

推荐(使用Flutter 2.0)

不要使用AnnotatedRegion,如docs中所述
应用程序不应使用自己的AnnotatedRegion将AppBar括起来。
首选方法是使用systemOverlayStyle属性:

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

js4nwp545#

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

jucafojl6#

我正在寻找解决方案,为相同的,我找到了一种方法来做这个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));

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

kqlmhetl

kqlmhetl7#

这将有助于使状态栏透明

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

比如:

vddsk6oq

vddsk6oq8#

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

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

如果您scaffold有appBar

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

dw1jzc5e9#

最简单的方法是导入services.dart并使用SystemUIOverlayStyle:

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));
  runApp(NameOfYourApp());
}

相关问题