HarmonyOS 鸿蒙Next 启动页如何去掉顶部和底部空白区域

发布于 1周前 作者 zlyuanteng 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 启动页如何去掉顶部和底部空白区域

windowStage.getMainWindow((err, data) => { if (err.code) { console.error(‘获取失败’ + JSON.stringify(err)); return; }

globalThis.windowClass = data // 赋值给全局变量windowClass // 设置全屏显示 globalThis.windowClass.setWindowLayoutFullScreen(true) // 隐藏状态栏显示 globalThis.windowClass.setWindowSystemBarEnable([‘navigation’]) });


更多关于HarmonyOS 鸿蒙Next 启动页如何去掉顶部和底部空白区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

参考:EntryAbility.ets

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  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/splash', (err) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      let windowClass: window.Window = windowStage.getMainWindowSync(); // 获取应用主窗口
      // 1. 设置窗口全屏
      let isLayoutFullScreen = true;
      windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
        .then(() => {
          console.info('Succeeded in setting the window layout to full-screen mode.');
        })
        .catch((err: BusinessError) => {
          console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
        });
      // 2. 设置状态栏和导航条隐藏
      windowClass.setSpecificSystemBarEnabled('status', false)
        .then(() => {
          console.info('Succeeded in setting the status bar to be invisible.');
        })
        .catch((err: BusinessError) => {
          console.error(`Failed to set the status bar to be invisible. Code is ${err.code}, message is ${err.message}`);
        });
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

启动闪屏页splash.ets

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

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

  aboutToAppear(): void {
    setTimeout(() => {
      router.pushUrl({ url: 'pages/Index' })
    }, 3000);
  }

  aboutToDisappear(): void {
    //销毁定时器
  }

  build() {
    Column() {
      Image($r('app.media.startIcon')).width('100%').height("100%")//占据页面
    }.backgroundColor(Color.Red)
    .height('100%')
    .width('100%')
  }
}

首页index.ets

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }.backgroundColor(Color.Green)
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next 启动页如何去掉顶部和底部空白区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS(鸿蒙)系统中,若要去掉应用启动页的顶部和底部空白区域,通常涉及对启动页布局文件的调整。以下是一些可能的解决方案:

  1. 检查布局文件

    • 确保启动页的布局文件(如XML或JSON格式,取决于你使用的开发工具)中没有设置不必要的顶部和底部边距(margin)或填充(padding)。
    • 检查是否有父布局设置了固定的尺寸或不当的对齐方式,导致子视图(即启动页内容)无法填充整个屏幕。
  2. 全屏设置

    • 在应用的config.json文件中,检查是否有窗口配置限制了显示区域。确保没有设置窗口大小或位置限制,允许应用内容全屏显示。
    • 在代码中,可以通过设置窗口的属性来确保应用启动即全屏显示,无顶部状态栏和底部导航栏遮挡。
  3. 适配不同屏幕

    • 确保启动页的布局能够自适应不同分辨率和屏幕比例的设备,避免因屏幕适配问题导致的空白区域。

如果经过上述检查后问题依旧存在,可能是由于特定的设备或系统版本导致的兼容性问题。此时,建议检查是否有相关的鸿蒙开发者社区讨论或官方文档更新,以获取更具体的解决方案。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部