应用启动时出现黑屏
=========

#### 问题现象

应用启动后，在页面内容出现前显示黑屏。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e3/v3/6t908K0RT3GZoKdIEftigw/zh-cn_image_0000002628755348.png?HW-CC-KV=V1&HW-CC-Date=20260709T134021Z&HW-CC-Expire=86400&HW-CC-Sign=4D096C5EEB15E2B239685B28FBEFD343FC5B9DDA44FC49FA6A479C306061F46D "点击放大")

#### 背景知识

[setTimeout](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-timer#settimeout)可用来设定一个定时器，在定时到期以后执行注册的回调函数。

#### 问题定位

查看启动页在资源加载完成前，是否使用过渡动效或页面。若没有使用过渡动效或页面，启动页资源加载完成前无显示内容，导致黑屏。

#### 分析结论

启动页未设置资源加载完成前的替代显示内容，导致加载好内容前无显示内容，出现黑屏，影响用户体验。

#### 修改建议

启动页设置资源加载完成前的替代显示内容。

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

@Entry
@Component
struct StartDemo {
  @State loading: boolean = true;
  @State isShow: boolean = false;

  aboutToAppear() {
    let context: common.UIAbilityContext = this.getUIContext().getHostContext() as common.UIAbilityContext;
    window.getLastWindow(context).then((windowClass) => {
      windowClass.setWindowLayoutFullScreen(true);
    });
    _// 加载好内容后到时才显示，避免闪屏_
    setTimeout(() => {
      this.isShow = true;
    }, 2000);

   _ // 模拟页面内容加载_
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  }

  build() {
    Column() {
      if (!this.loading && this.isShow) {
       _ // 加载好的页面内容_
        Stack() {
          Text('Hello World')
            .fontSize(20);
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.White);
      } else {
        _// 未加载好页面内容时使用图片替代_
        Stack() {
          Image($r('app.media.beauty')) _// $r('app.media.beauty')需要替换为开发者需要的图片资源文件_
            .width('100%')
            .height('100%')
            .objectFit(ImageFit.Fill);
        }
        .width('100%')
        .height('100%');
      }
    }
    .backgroundColor(Color.Black)
    .width('100%')
    .height('100%');
  }
}

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f0/v3/GyRUb1cBRPOu0q9cL2kKog/zh-cn_image_0000002658954669.png?HW-CC-KV=V1&HW-CC-Date=20260709T134021Z&HW-CC-Expire=86400&HW-CC-Sign=23F30CC445DA109805A75B7BCFA009878F222D3B61B4BEEC61EF6046E4531BEC "点击放大")