我刚开始使用Flutter和Android Studio,并想知道是否有办法在Android上创建一个透明的状态栏(与AppBar之间没有过渡)。当我尝试设置状态栏颜色时,它会得到与AppBar不同的阴影。
我刚开始使用Flutter和Android Studio,并想知道是否有办法在Android上创建一个透明的状态栏(与AppBar之间没有过渡)。当我尝试设置状态栏颜色时,它会得到与AppBar不同的阴影。
您可以使用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的可能性。
是的,这在Android上是可能的。
要做到这一点,您可以使用SystemChrome
。该类提供了一个setSystemUIOverlayStyle
方法,您可以像这样使用它:
import 'package:flutter/services.dart';
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));
请记住,这仅适用于Android版本等于或大于Android M
,并且您需要通过避免Scaffold
自动添加的填充来在状态栏下绘制。您可以通过使用以下代码来实现:
...body: SafeArea(top: false, child: ...
在main.dart文件运行应用程序之前,您还可以广泛地使用app进行操作:
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());
}
不要像文档中所提到的那样使用AnnotatedRegion
应用程序不应该用自己的AnnotatedRegion包含一个AppBar。
首选方法是使用systemOverlayStyle
属性:
Scaffold(
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent),
),
)
@sander-dalby-larsen的解决方案完美地奏效了,但是状态栏图标的颜色成为一个问题。下面的解决方案将状态栏设置为透明
,状态栏图标和导航栏的颜色为黑色
。
@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),
),
),
);
}
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));
最简单的方法是导入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());
}
只需在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
)