如何实现状态栏背景颜色沉浸
=============

**问题描述**

为了避免状态栏颜色与背景重合，需根据状态栏和内容区域的颜色进行沉浸式效果适配，具体方式如下：

**解决措施**

方式一：设置窗口的背景色来实现沉浸式效果，参考代码如下：

_// EntryAbility.ets_

onWindowStageCreate(windowStage: window.WindowStage): void {
  windowStage.loadContent('pages/Example', (err, data) => {
    if (err?.code) {
      return;
    }
   _ // Set the full window color to match the color of the application elements_
    windowStage.getMainWindowSync().setWindowBackgroundColor('#008000');
  });
}

方式二：对顶部组件使用[expandSafeArea](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-expand-safe-area#expandsafearea)属性扩展安全区域属性，实现状态栏沉浸

@Entry
@Component
struct Example {
  build() {
    Column() {
      Row() {
        Text('Top Row')
          .fontSize(40)
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .backgroundColor('#F08080')
    _  // Set the top drawing to extend to the status bar_
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.TOP\])


      Row() {
        Text('ROW2')
          .fontSize(40)
      }
      .backgroundColor(Color.Orange)
      .padding(20)


      Row() {
        Text('ROW3')
          .fontSize(40)
      }
      .backgroundColor(Color.Orange)
      .padding(20)


      Row() {
        Text('ROW4')
          .fontSize(40)
      }
      .backgroundColor(Color.Orange)
      .padding(20)


      Row() {
        Text('ROW5')
          .fontSize(40)
      }
      .backgroundColor(Color.Orange)
      .padding(20)


      Row() {
        Text('Bottom Row')
          .fontSize(40)
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .backgroundColor(Color.Orange)
   _   // Set the bottom drawing to extend to the navigation bar_
      .expandSafeArea(\[SafeAreaType.SYSTEM\], \[SafeAreaEdge.BOTTOM\])
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .backgroundColor('#008000')
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

方式三：手动设置状态栏的颜色：

实现步骤：

1.  获取并缓存窗口对象，可参考：[Interface (Window)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window)。
2.  在打开目标页面时，使用[setWindowSystemBarProperties](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setwindowsystembarproperties9)接口设置状态栏属性。

获取窗口对象并缓存。

_// EntryAbility.ets_

onWindowStageCreate(windowStage: window.WindowStage): void {
  _// Main window is created, set main page for this ability_
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');


  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    let windowClass: window.Window = windowStage.getMainWindowSync(); /_/ Get the main window of the application_
  _// 1. Set the window to full screen_
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
    _// 2. Cache window object_
    AppStorage.setOrCreate('windowClass', windowClass);
  });
}

打开页面时，设置状态栏属性，选择所需的沉浸式颜色。

import { window } from '@kit.ArkUI';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct CommonTopBar {
  @State message: string = 'Hello World';

  aboutToAppear() {
   _ // Get the current application window_
    let windowClass = AppStorage.get<window.Window>('windowClass') as window.Window;
    try {
     _ // Set the background color of the status bar and navigation bar to the same color as the application window_
      windowClass.setWindowSystemBarProperties({
      _  // The color attribute is ARGB, set the dust cover to 0% to make it transparent_
        _// Navigation bar color_
        navigationBarColor: '#fd121de5',
       _ // Status bar color_
        statusBarColor: '#ff0ad9c2',
        _// Status bar text color_
        statusBarContentColor: '#fff1e50a'
      })
    } catch (error) {
      let err = error as BusinessError;
      hilog.error(0x0000, 'CommonTopBar', \`error code:${err.code},message:${err.message}\`);
    }
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('PageHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: {
            anchor: '\_\_container\_\_',
            align: VerticalAlign.Center
          },
          middle: {
            anchor: '\_\_container\_\_',
            align: HorizontalAlign.Center
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}