目录

How do I hide the status bar in full screen mode and show it when not in full screen mode?

Symptom

After the setWindowLayoutFullscreen API is called to create an immersive layout in full screen mode, the status bar is hidden. What can be done to display the status bar when exiting the full screen mode and returning to the previous page?

Solution

When exiting full screen mode, call setSpecificSystemBarEnabled to enable the status bar, and then call setWindowLayoutFullscreen to refresh the layout for the setting to take effect.

Refer to the code snippet below.

First, obtain the window object. For details, see Interface (Window).

// 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/GridImage', (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(); // Obtain the main window of the application.
    // 1. Set the window to full screen.
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
    // 2. Cache the window object.
    AppStorage.setOrCreate('windowClass', windowClass);
  });
}
import { window } from '@kit.ArkUI';


@Entry
@Component
struct GridImage {
  @State message: string = 'Hello World';
  @State isVisible: boolean = true;
  @State isVisibleButton: boolean = true;
  data: number[] = [];
  windowClass = AppStorage.get<window.Window>('windowClass') as window.Window;


  aboutToAppear(): void {
    for (let i = 0; i < 40; i++) {
      this.data.push(i);
    }
  }


  build() {
    Stack() {
      Grid() {
        ForEach(this.data, (item: number, index: number) => {
          GridItem() {
            Image($r('app.media.startIcon'))
              .width('100%')
              .objectFit(ImageFit.Cover)
              .onClick(() => {
                let isLayoutFullScreen = true;
                this.windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
                this.windowClass.setSpecificSystemBarEnabled('status', false);
                this.windowClass.setSpecificSystemBarEnabled('navigationIndicator', false);
                this.isVisible = !this.isVisible;
              })
          }
          .aspectRatio(1)
        }, (item: number, index: number) => JSON.stringify(item) + index)
      }
      .visibility(this.isVisible ? Visibility.Visible : Visibility.None)
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(2)
      .columnsGap(2)
      .height('100%')
      .width('100%')


      Image($r('app.media.startIcon'))
        .objectFit(ImageFit.Contain)
        .width('100%')
        .visibility(this.isVisible ? Visibility.None : Visibility.Visible)
        .onClick(() => {
          let isLayoutFullScreen = false;
          this.windowClass.setSpecificSystemBarEnabled('status', true);
          this.windowClass.setSpecificSystemBarEnabled('navigationIndicator', true);
          this.windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
          this.isVisible = !this.isVisible;
        })
    }
  }
}