Flutter 修改状态栏

曉之朱雀
2,562 阅读2分钟

再flutter中修改状态栏是会用到 SystemUiOverlayStyle 这个类

然后对appbar进行设置

  1. 方法1，在项目的入口出的 MaterialApp 类中设置theme
theme: ThemeData(
appBarTheme:  AppBarTheme(
 systemOverlayStyle: SystemUiOverlayStyle(
   statusBarColor: Colors.white,//状态栏的颜色为白色
   statusBarIconBrightness: Brightness.dark,//状态栏icon为深色 Android使用
   statusBarBrightness: Brightness.light//状态栏为亮色模式IOS使用
 )
)

),

statusBarColor:设置了状态栏的颜色为白色\

statusBarIconBrightness:取值只有两个 dark和light 因为我设置了状态栏为白色所以状态栏的文字图标我设置了深色模式，如果设置了light 则icon和文字都是白色\

statusBarBrightness: IOS 使用 基本上是和statusBarIconBrightness 相反的设置 参考SystemUiOverlayStyle 提供了两个常量 SystemUiOverlayStyle.light和SystemUiOverlayStyle.drak一开始我不知道，设置了好几次都搞混了

  1. 方法2，方法一是在MaterialApp入口处设置的全局的状态栏，这时候 我想要单独对每个页面设置那该怎么办呢，其实还是通过appbar设置
appBar: AppBar(
  title: Text(widget.title),
  systemOverlayStyle:SystemUiOverlayStyle(
      statusBarColor: Colors.red,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark
  ),
),

其实 还是一样 单独对设置appbar的systemOverlayStyle，而且会覆盖方法一的设置

  1. 方法3， 设置appbar的backgroundColor
appBar: AppBar(

  backgroundColor: Colors.red,//状态栏红色

  title: Text(widget.title),
  systemOverlayStyle: SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark
  ),
),

也可以使用appbar的backgroundColor同时给状态看设置颜色，不过这时候需要对systemOverlayStyle中的 statusBarColor 设置为透明 不然就按方法二一样设置。

  1. 上述的方法都需要appbar 如果页面不需要appbar 例如一个沉浸式的页面 这时候就需要手动动态设置了
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.red,
    statusBarIconBrightness: Brightness.light,
    statusBarBrightness: Brightness.dark
));

通过SystemChrome.setSystemUIOverlayStyle 方法还是对systemOverlayStyle进行设置，这个方法在你需要设置的时候调用即可

  1. 渐变色的状态栏设置 对于渐变色的状态栏，可以在4的基础上写一个渐变色的布局高度为状态栏的高度 来充当状态栏 也可以通过自定义appbar

appBar: AppBar(
 systemOverlayStyle: SystemUiOverlayStyle(
     statusBarColor: Colors.transparent,
     statusBarIconBrightness: Brightness.dark,
     statusBarBrightness: Brightness.dark
 ),
 flexibleSpace:Container(
   decoration: BoxDecoration(
     gradient: LinearGradient(
       begin: Alignment.centerRight,
       end: Alignment.centerLeft,
       colors: [
         Colors.red,
         Colors.white
       ], //只写[Colors.white]Android不生效 会显示主题的颜色
     ),
   ),
 ) ,

 backgroundColor: Colors.deepPurpleAccent,

 title: Text(widget.title),

),

这里是通过flexibleSpace 属性 他需要一个Widget 所以给一个渐变的Widget 就行，同样给一个纯色的widget也可以来设置纯色的状态栏 这种情况类似与方法3 而且 这时候appbar的背景颜色不会起作用

avatar
文章
阅读
粉丝