flutter开发使用AnnotatedRegion修改状态栏字体颜色，导致导航栏也变黑了的解决方法

Posted 2020-12-21 yongfengnice

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若的祸。。。