Flutter中沉浸式状态栏的设置
沉浸式状态栏是什么?
状态栏是指Android手机顶部显示手机状态信息的位置,Android从4.4版本开始新增了透明状态栏功能,状态栏可以自定义颜色背景,是titleBar能够和状态栏融为一体,增进沉浸感。
状态栏默认为黑色半透明,设置沉浸式状态栏后,可以与标题栏颜色一致,效果如上图。
如何实现沉浸式状态栏
在flutter项目目录下找到android主入口页面MainActivity.kt或MainActivity.java,判断一下版本号然后将状态栏颜色修改设置成透明,因为他本身是黑色半透明。
MainActivity.kt路径:android\app\src\main\kotlin\com\example\flutter_app\MainActivity.kt
新增以下代码:
import android.os.Build;
import android.os.Bundle;
class MainActivity: FlutterActivity() {
//设置状态栏沉浸式透明(修改flutter状态栏黑色半透明为全透明)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
window.statusBarColor = 0
}
}
}
使用Kotlin语言的MainActivity.kt路径:android\app\src\main\java\com\example\flutter_app\MainActivity.java
新增以下代码以上所示的代码。
可能存在的问题及解决方案
在经过上面的设置之后,可能存在背景颜色为浅色而状态栏也为浅色的情况,这时候状态栏就会看不清楚。可以又以下几种解决方案。
// Created by Qiaozi 20210823
//方案1
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);//有dark和light两个可选值
}
//方案2
//设置 AppBar brightness 属性值,修改状态栏颜色
appBar: AppBar(
brightness: Brightness.light,
)
//Brightness.light 黑色
//Brightness.dark 白色
//方案3
//使用AnnotatedRegion修改状态栏颜色
@override
Widget build(BuildContext context) {
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: Material(child:Scaffold(),),);
}
//SystemUiOverlayStyle.light 白色
//SystemUiOverlayStyle.dark 黑色