实战03-解决屏幕上下白边问题

import { window } from '@kit.ArkUI';

//生命周期函数：初始化渲染时候
aboutToAppear(): void {
  this.getHomeData()

  window.getLastWindow(getContext())
    .then(win => {
      win.setWindowLayoutFullScreen(true)
    })
}

//.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

        EntryAbility.ets

onWindowStageCreate(windowStage: window.WindowStage): void {
  // 1.获取应用主窗口。
  let windowClass: window.Window | undefined = undefined;
  windowStage.getMainWindow((err: BusinessError, 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));

    // 2.实现沉浸式效果。方式一：设置导航栏、状态栏不显示。
    let names = [];
    windowClass.setWindowSystemBarEnable(names, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar to be visible.');
    });
    // 2.实现沉浸式效果。方式二：设置窗口为全屏布局，配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性，与主窗口显示保持协调一致。
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => {
      if (err.code) {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the window layout to full-screen mode.');
    });
    let sysBarProps: window.SystemBarProperties = {
      statusBarColor: '#ff00ff',
      navigationBarColor: '#00ff00',
      // 以下两个属性从API Version 8开始支持
      statusBarContentColor: '#ffffff',
      navigationBarContentColor: '#ffffff'
    };
    windowClass.setWindowSystemBarProperties(sysBarProps, (err) => {
      if (err.code) {
        console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in setting the system bar properties.');
    });
  })
  // 3.为沉浸式窗口加载对应的目标页面。
  windowStage.loadContent("pages/page2", (err) => {
    if (err.code) {
      console.error('Failed to load the content. Cause:' + JSON.stringify(err));
      return;
    }
    console.info('Succeeded in loading the content.');
  });


}

这个破问题折磨了我两天，大概知道上下导航条tabbar之间的关系。一直尝事通过高度计算向外扩的方式。后来放弃了。老老实实官网去找方式找方法。有一点小痛苦，鸿蒙os 适合丰富经验的手机端工程师+前端工程师。的确新手不太友好。