萌萌の初音
萌萌の初音
发布于 2022-03-21 / 1160 阅读
0

Flutter下三种修改状态栏的方式

开发过程中,我们需要根据背景颜色对状态栏进行修改,以下三种方式针对不同情况对状态栏进行修改:

  • 方法一:
SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.light ///SystemUiOverlayStyle.dark
);

方法一有一定的局限性,在复杂的widget中没有效果,这种情况需要在方法二、三中实现。

  • 方法二:
Scaffold(
    appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.light ///SystemUiOverlayStyle.dark
    ),
)

此方法适用于使用了AppBar组件对状态栏进行修改,没有使用AppBar或重写PreferredSizeWidget可以用方法三进行实现。

  • 方法三:
AnnotatedRegion(
    value: SystemUiOverlayStyle.light ///SystemUiOverlayStyle.dark
    child: SizedBox(),
)

方法三可以在方法一无效,方法二无使用条件下使用,如果只想修改状态栏样式而不是导航栏,需要将AnnotatedRegion放入Colunm内部的顶部实现,而不是把AnnotatedRegion作为根widget。

如果需要但状态栏、导航栏、状态栏背景色进行单独的修改,可以将SystemUiOverlayStyle进行具体的实现:

SystemUiOverlayStyle(
    systemNavigationBarColor: Color(0xFF000000),
    statusBarColor: Color(0xFF000000),
    systemNavigationBarIconBrightness: Brightness.light,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.dark,
    ///还有其他参数可自行查阅
)