HarmonyOS鸿蒙Next中开发启动页面,怎么设置全屏

HarmonyOS鸿蒙Next中开发启动页面,怎么设置全屏 通常启动页面都是全屏显示,怎么设置全屏

7 回复

在进入启动页时设置为全屏模式然后隐藏状态栏,在即将结束启动页面时,在设置显示状态栏显示即可。

示例:退出页面时,调用setSpecificSystemBarEnabled启用状态栏,再调用setWindowLayoutFullscreen接口刷新布局使设置生效。

// 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(); // 获取应用主窗口
    // 1. 设置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
    // 2. 缓存window窗口对象
    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;
        })
    }
  }
}

相关文档:【窗口全屏布局方案】

更多关于HarmonyOS鸿蒙Next中开发启动页面,怎么设置全屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


简易启动页是每个UIAbility都必须配置的能力,开发者通过配置module.json5文件中的abilities标签的startWindowIcon和startWindowBackground字段,实现简易启动页的配置。

说明

  • startWindowIcon用于展示应用图标,不会随窗口尺寸进行缩放。建议开发者避免设计针对单个产品全屏尺寸的startWindowIcon图标资源,防止在其他尺寸设备的显示效果无法自动适配。
  • 全屏资源的展示建议采用配置增强启动页

在创建的UIAbility模板中,简易启动页相关字段的默认配置如下:

"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",

全屏资源的展示建议采用配置增强启动页

图片

{
  "startWindowType": "REQUIRED_SHOW",
  "startWindowColorModeType": "FOLLOW_SYSTEM",
  "startWindowAppIcon": "$media:icon",
  "startWindowIllustration": "$media:illustration",
  "startWindowBrandingImage": "$media:brand",
  "startWindowBackgroundColor": "$color:start_window_background",
  "startWindowBackgroundImage": "$media:bgImage",
  "startWindowBackgroundImageFit": "Contain"
}

参考地址

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/launch-page-config#配置增强启动页

cke_121.png

Image($r('app.media.launch_icon'))
.width('100%')
.height('100%')
.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

只需要给Image加上安全区域就行了,效果非常棒:

cke_4210.png

希望HarmonyOS能继续优化系统稳定性,减少崩溃和重启的情况。

一、通常在设置启动页的时候,需要注意的状态栏颜色要一致,我们只需要在EntryAbility的onCreate方法加上下述代码

//1、设置全屏
// 获取主窗口实例
const windowClass = windowStage.getMainWindowSync();
// 设置窗口布局为全屏模式
windowClass.setWindowLayoutFullScreen(true);
// 获取系统状态栏区域信息
const avoidAreaTop = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
// 获取导航指示器区域信息
const avoidAreaBottom = windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR);
// 获取顶部区域高度
const topRectHeight = avoidAreaTop.topRect.height;
// 获取底部区域高度
const bottomRectHeight = avoidAreaBottom.bottomRect.height;
// 将顶部区域高度存入全局应用存储
AppStorage.setOrCreate('topHeight', px2vp(topRectHeight));
// 将底部区域高度存入全局应用存储
AppStorage.setOrCreate('bottomHeight', px2vp(bottomRectHeight));
// 将窗口对象存入全局应用存储
AppStorage.setOrCreate('windowStage', windowStage)
//AppStorage.setOrCreate('enableDarkMode', true);
// AppStorage.setOrCreate('isFollowSystemSetting', true);

// 2. 设置导航条隐藏
windowClass.setSpecificSystemBarEnabled('navigationIndicator', false).then(() => {
  console.info('Succeeded in setting the navigation indicator to be invisible.');
}).catch((err: BusinessError) => {
  console.error(`Failed to set the navigation indicator to be invisible. Code is ${err.code}, message is ${err.message}`);
});

二、效果如下:

cke_6670.png

在HarmonyOS Next中,设置启动页面全屏需在module.json5配置文件中进行。在abilities字段对应的启动Ability中,将window对象的designWidth设置为屏幕宽度,并将isFullScreen属性设置为true。同时,确保background等相关UI属性已正确配置以适配全屏显示。

在HarmonyOS Next中,可以通过设置UIAbility的启动窗口属性来实现全屏启动页。具体操作如下:

  1. 在UIAbility的onWindowStageCreate生命周期回调中设置

    onWindowStageCreate(windowStage: window.WindowStage) {
      // 获取主窗口
      let mainWindow = windowStage.getMainWindow()
      
      // 设置全屏显示
      mainWindow.setWindowLayoutFullScreen(true)
      
      // 隐藏系统栏(状态栏和导航栏)
      mainWindow.setWindowSystemBarEnable(['status', 'navigation'])
    }
    
  2. module.json5配置文件中声明权限(如果需要隐藏系统栏):

    {
      "module": {
        "requestPermissions": [
          {
            "name": "ohos.permission.SYSTEM_FLOAT_WINDOW"
          }
        ]
      }
    }
    

关键点说明

  • setWindowLayoutFullScreen(true):设置窗口为全屏布局模式
  • setWindowSystemBarEnable([]):通过传入空数组来隐藏所有系统栏,或传入['status', 'navigation']控制具体显示哪些系统栏
  • 全屏设置应在窗口显示前完成,确保启动时即生效

这样配置后,应用启动时将直接以全屏模式显示启动页面,符合常见的启动页设计规范。

回到顶部