多任务切换应用时，页面闪屏
=============

#### 问题现象

从其他应用切换到当前应用时，弹窗重新弹出，页面闪屏。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9a/v3/kgCZ9UqQR0SIXFYoDMSNhw/zh-cn_image_0000002628613380.png?HW-CC-KV=V1&HW-CC-Date=20260709T134019Z&HW-CC-Expire=86400&HW-CC-Sign=A932A4B8C7C51947B476288A97A10B2B4CC2F26B9F1C6D189EBD9F38B91F355C "点击放大")

#### 背景知识

*   自定义组件的生命周期包括[onPageShow](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#onpageshow)和[onPageHide](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-custom-component-lifecycle#onpagehide)，它们在页面每次显示和隐藏时触发一次。
*   [自定义弹窗 (CustomDialog)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-methods-custom-dialog-box)通过CustomDialogController类显示自定义弹窗。使用弹窗组件时，优先考虑自定义弹窗，便于弹窗样式与内容的自定义。

#### 问题定位

该页面搜索onPageShow和onPageHide，查看页面每次显示和隐藏时弹窗的设置。页面设置为页面隐藏时关闭弹窗，页面显示时重新打开弹窗。

_/\*切换到其他应用时不关闭自定义弹窗，切换到其他应用再切换回来，会发现有闪屏现象_
_这是因为在页面隐藏时关闭了弹窗，页面显示时重新打开了弹窗_
_导致切换回该页面的一瞬间，弹窗是处于未打开的状态，此时页面亮度正常（弹窗处于打开状态时页面较暗）_
_于是就发生闪屏现象\*/_
@Entry
@Component
struct SplashScreen {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: this.Dialog,
    autoCancel: true,
    customStyle: true
  });

 _ // 此处onPageShow和onPageHide使用不当，使弹窗多次隐藏和显示，会导致闪屏_
  onPageShow(): void {
    this.dialogController.open();
  }

  onPageHide(): void {
    this.dialogController.close();
  }

  build() {
    Column() {
    _  // 页面内容_
    }
  }

  @Builder Dialog(){
  _  // 弹窗内容_
  }
}

#### 分析结论

页面设置为页面隐藏时关闭弹窗，页面显示时重新打开弹窗，导致页面出现闪屏现象。

#### 修改建议

无需在页面隐藏时关闭弹窗，页面显示时重新打开弹窗，而是使用aboutToAppear使弹窗只在页面加载完成时出现一次。

@Entry
@Component
struct SplashScreen {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: this.Dialog,
    autoCancel: true,
    customStyle: true
  });

 _ // 不在页面隐藏时关闭弹窗和页面显示时重新打开弹窗_
  aboutToAppear(): void {
    this.dialogController.open();
  }

  build() {
    Stack() {
      Column() {
        Text('hello world')
          .fontSize(20);
      }
      .justifyContent(FlexAlign.Center)
      .height('50%')
      .width('100%');
    }
    .height('100%')
    .width('100%');
  }

  @Builder
  Dialog() {
    Stack() {
      Column() {
        Text('输入值')
          .fontSize(20)
          .fontWeight(500)
          .width('100%')
          .textAlign(TextAlign.Center)
          .margin({ bottom: 20 });
        TextInput({ placeholder: '请输入' })
          .width('80%')
          .height(40);

        Row() {
          Button('取消')
            .backgroundColor(Color.White)
            .borderWidth(0)
            .fontColor('#0A59F7')
            .width(100)
            .height(40)
            .onClick(() => {
              this.dialogController.close();
            });

          Button('确定')
            .backgroundColor('#0A59F7')
            .fontColor(Color.White)
            .width(100)
            .height(40)
            .borderRadius('50%')
            .onClick(() => {
              this.dialogController.close();
            });
        }
        .width('80%')
        .justifyContent(FlexAlign.SpaceBetween)
        .margin({ top: 20 });
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center);
    }
    .alignContent(Alignment.TopEnd)
    .padding({ top: 5, bottom: 5 })
    .borderRadius(30)
    .backgroundColor(Color.White)
    .height(200)
    .width('80%');
  }
}

效果图如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a0/v3/nsi--VxCTpGKJ4jt86qsrA/zh-cn_image_0000002658972593.png?HW-CC-KV=V1&HW-CC-Date=20260709T134019Z&HW-CC-Expire=86400&HW-CC-Sign=241B945920504908019322A2F0CB5390A323890CE43AF9DC1CAC00819A3EA363 "点击放大")