ArkUI应用开发笔记[2]——设置导航栏、状态栏的可见模式原创

离北况归

发布于 2023-10-8 13:44

浏览

3收藏

本期笔者介绍如何使用@ohos.window模块的setWindowSystemBarEnable接口来设置导航栏、状态栏的可见模式

1.setWindowSystemBarEnable接口

https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-window.md#setwindowsystembarenable9

ArkUI应用开发笔记[2]——设置导航栏、状态栏的可见模式-鸿蒙开发者社区

通过设置setWindowSystemBarEnable接口的names参数来控制导航栏、状态栏的可见模式

names参数设置为['navigation']，设置顶部状态栏不可见。
names参数设置为['status']，设置底部导航栏不可见。
names参数设置为空,即[]，设置底部导航栏、顶部状态栏都不可见

2.设置顶部状态栏不可见

ArkUI应用开发笔记[2]——设置导航栏、状态栏的可见模式-鸿蒙开发者社区
src/main/ets/entryability/EntryAbility.ts中，names参数设置为['navigation']

onWindowStageCreate(windowStage: window.WindowStage) {
...
...
    let names: Array<'status' | 'navigation'> = ['navigation'];
    let windowClass = null;
    windowStage.getMainWindow((err, data) => {
    if (err.code) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
    windowClass.setWindowSystemBarEnable(names, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar to be invisible.');
    });
  });
...
...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

3.设置底部导航栏不可见

ArkUI应用开发笔记[2]——设置导航栏、状态栏的可见模式-鸿蒙开发者社区
src/main/ets/entryability/EntryAbility.ts中，names参数设置为['status']

onWindowStageCreate(windowStage: window.WindowStage) {
...
...
    let names: Array<'status' | 'navigation'> = ['status'];
    let windowClass = null;
    windowStage.getMainWindow((err, data) => {
    if (err.code) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
    windowClass.setWindowSystemBarEnable(names, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar to be invisible.');
    });
  });
...
...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

4.设置底部导航栏、顶部状态栏都不可见

ArkUI应用开发笔记[2]——设置导航栏、状态栏的可见模式-鸿蒙开发者社区

src/main/ets/entryability/EntryAbility.ts中，names参数设置为空

onWindowStageCreate(windowStage: window.WindowStage) {
...
...
    let names: Array<'status' | 'navigation'> = [];
    let windowClass = null;
    windowStage.getMainWindow((err, data) => {
    if (err.code) {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
      return;
    }
    windowClass = data;
    console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data));
    windowClass.setWindowSystemBarEnable(names, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar to be invisible.');
    });
  });
...
...
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.