Harmony UI Secreen

What you can learn

Which ArkUI components were used?

• Stack
• Image
• RelativeContainer
• Column
• Row
• Text
• Button
• Divider

What key knowledge points are included?

2.1 Change to an immersive title bar and hide the top title bar

use onPageShow and onPageHide

  // 页面显示时：进入沉浸式，隐藏导航条
onPageShow() {
    const context = this.getUIContext().getHostContext();
    if (context) {
        window.getLastWindow(context).then((win: window.Window) => {
        // 1. 开启沉浸式布局（让内容延伸到状态栏区域）
        win.setWindowLayoutFullScreen(true);

        // 2. 真正隐藏顶部状态栏
        win.setSpecificSystemBarEnabled('status', false);

        // 3. 你已有的：隐藏底部导航条
        win.setSpecificSystemBarEnabled('navigationIndicator', false);
        });
    }
}

// 页面隐藏时：恢复导航条，避免污染其他页面
onPageHide() {
    const context = this.getUIContext().getHostContext();
    if (context) {
        window.getLastWindow(context).then((win: window.Window) => {
        win.setSpecificSystemBarEnabled('status', true);
        win.setSpecificSystemBarEnabled('navigationIndicator', true);
        });
    }
}