第一百五十六回 如何实现沉浸式状态栏

我们在上一章回中介绍了如何获取位置相关的内容，本章回中将介绍 如何实现沉浸式状态栏.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在使用App的过程中，有些App的页面颜色和手机最上方的状态栏颜色不一样，如果让它们的颜色相同，那就会让人感觉App融入到了手机系统中。这种感觉就是沉浸式状态栏，我们在本章回中将介绍如何实现这种沉浸式状态。

使用方法

使用Flutter开发的App时状态栏的颜色会和页面上方的AppBar的背景颜色保持一致，如果没有AppBar那么就会和当前页面的背景色保持一致。这个是系统自动实现的功能，我们什么也不需要做，不过颜色相同了状态栏还会有一层阴影效果，让状态栏突出显示。我们需要做的就是去掉这层阴影效果，让它们保持一样。

Flutter提供了相关的接口可以修改状态栏的style,我们只需要修改style就可以创建出不同效果。稍后我们会通过示例代码来演示具体的实现方法。

示例代码

void main() {
///让状态栏和程序的appBar融为一体构成沉浸式效果
  ///SystemChrome这个类及其方法只能在main方法中运行，其它地方无法使用
  SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
    ///这两个属性可以控制状态栏为透明色,它可以和appBar的颜色一致,主要是去掉了阴影效果
    statusBarColor: Colors.transparent,
    statusBarBrightness: Brightness.light,
    ///修改状态栏中文字的颜色为黑色，没有效果
    // statusBarIconBrightness: Brightness.dark,
  );
  SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);

 runApp();
}

上面的代码中先是创建了透明风格的style,然后通过系统提供的接口修改了状态栏的style，进而实现了沉浸式状态栏效果。不过还有一些细节需要补充：

1. 这个代码需要运行在程序的main方法中，并且是在runApp()方法调用前运行；
2. 使用这个代码时最好去掉页面上方的AppBar,不然AppBar会影响视觉；
3. 沉浸式状态只在Android平台上使用，IOS默认就是这种效果，不需要专门去设置；

有看官说AppBar还有作用，不能去掉，如何处理AppBar呢？看官莫急，只需要把AppBar中的forceMaterialTransparency属性设置为true就可以。这样就可以使AppBar和状态栏以及屏幕融为一体。

我在这里就不演示程序的运行效果了，建议大家自己动手去实践，真正检验一下沉浸式状态栏的效果。

看官们，与"如何实现沉浸式状态栏"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!