flutter开发使用AnnotatedRegion修改状态栏字体颜色,导致导航栏也变黑了的解决方法
flutter开发使用AnnotatedRegion修改状态栏字体颜色,导致导航栏也变黑了的解决方法
原因解析:下面这样写出问题的原因在于使用AnnotatedRegion包裹了整个页面,从而导致手机最底部的导航栏变黑了,其实也出现了截取。
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion( //使用AnnotatedRegion修改状态栏字体颜色,但是这样写导航栏也变黑了。
value: SystemUiOverlayStyle.dark,
child: Container(
color: Colors.white,
child: ListView(
children: <Widget>[
Header(),
Cells(context),
Cells(context),
...
],
),
),
),
);
正确写法:AnnotatedRegion应该只包裹顶部状态栏处的控件,比如AppBar的写法就不会导致底部导航栏变黑。正确写法如下:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
//将Header抽取出来,AnnotatedRegion只包裹顶部的Header,这样写既能实现修改状态栏字体,也没有影响到底部导航栏。
AnnotatedRegion(child: Header(), value: SystemUiOverlayStyle.dark),
Expanded(
child: Container(
color: Colors.white,
child: ListView(
children: <Widget>[
Cells(context),
Cells(context),
...
],
),
),
),
],
),
);
}
或者使用系统自带的AppBar实现,代码如下:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar( //AppBar只影响到顶部状态栏,没有影响整个页面吧?所以也就没有影响到底部的导航栏了。道理是一样的。
brightness: Brightness.light,//Brightness.light对应SystemUiOverlayStyle.dark,具体看源码就知道了。
),
body: Container(
color: Colors.white,
child: ListView(
children: <Widget>[
Cells(context),
Cells(context),
...
],
),
),
);
}
这个问题困扰了很久呀,怎么页面切换着,最下面的导航栏变黑了。。。原来是AnnotatedRegion若的祸。。。