正文:
使用 AnnotatedRegion
组件包裹 Scaffold
支持 dark
和 light
两种颜色。通过 AnnotatedRegion
设置当前界面的状态栏及底部导航栏的样式。
如下图:
教你如何使用Flutter
制作一个透明沉溺式的状态栏导航栏或修改状态栏颜色为与你应用主题匹配的颜色。
以 Flutter2
.0 为例
flutter2
沉溺式透明状态栏导航栏实现代码
下面提供的几种方法可根据应用场景进行灵活使用。实现分为 Android
沉溺式和 IOS
沉溺式。
方法一:setSystemUIOverlayStyl
透明状态栏
使用 servic
方法 set
状态颜色为透明
// https
://www
.huizhanii
.com
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
());
}
注意,如果您的应用中在 man
入口使用了 AppBar
,则该方法会被 AppBar
的值所覆盖,解决方法是将该方法移至 runApp
方法后:
方法二:system
OverlayStyle
透明状态栏
指定用于与 AppBar
重叠的系统覆盖的样式,如果 AppBar
与全局设置有重叠覆盖的情况,使用 systemOverlayStyle
可确保效果完整。
// https
://www
.huizhanii
.com
Scaffold
(
appBar
: AppBar
(
backwardsCompatibility
: false
,
systemOverlayStyle
: SystemUiOverlayStyle
(statusBarColor
: Colors
.transparent
),
),
)
方法三:AnnotatedRegion
透明状态栏
通过 AnnotatedRegion
设置当前界面的状态栏及底部导航栏的样式,使用 AnnotatedRegion
组件包裹 Scaffold
,支持 dark
和 light
两种颜色。
// https
://www
.huizhanii
.com
@override
Widget
build
(BuildContext
context
) {
return
转载请注明:汇站网 » flutter
沉溺式透明状态栏导航栏实现/状态栏颜色设置