【HarmonyOS NEXT】如何设置@Entry实现全透明或者半透明效果

 【关键字】

Entry/ 全透明 / 半透明 / 弹出

【问题描述】

想实现A页面弹出B页面，B页面设置半透明背景的效果。@Entry可以实现全透明或者半透明效果吗？需要如何设置？现在目前设置了"#80000000"可以隐约看到上一页的内容，但是不是"#80000000"真正的效果，即使设置全透明"#00000000"页看不到全透的效果。

【解决方案】

此场景可以将B页面作为一个子窗口加载然后将子窗口设置为透明背景，这样来实现背景半透明效果。

示例代码如下：

• EntryAbility.ets

  export default class EntryAbility extends UIAbility {
  storage: LocalStorage = new LocalStorage();
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  this.storage = new LocalStorage();
  }
  …
  onWindowStageCreate(windowStage: window.WindowStage): void {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  AppStorage.setOrCreate("windowStage", windowStage);
  windowStage.loadContent('pages/APage', this.storage, (err, data) => {
  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. Data: %{public}s', JSON.stringify(data) ?? '');
  });
  }
  …
  }

• APage.ets

  import window from '@ohos.window';
  
  @Entry
  @Component
  struct APage {
  build() {
  Row() {
  Column() {
  Button("pageA").onClick(() => {
  let windowStage_: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
  windowStage_.createSubWindow("subWindow", (err, win) => {//创建透明子窗口并打开
  win.setUIContent('pages/BPage');
  win.showWindow();
  })
  })
  }
  .width('100%')
  }
  .height('100%')
  .backgroundColor(Color.Pink)
  }
  }

• BPage.ets

  import window from '@ohos.window';
  
  @Entry
  @Component
  struct BPage {
  @State message: string = 'BPage';
  
  aboutToAppear() {
  window.findWindow("subWindow").setWindowBackgroundColor("#00000000") //设置子窗口背景透明
  }
  
  onBackPress() { //关闭子窗口
  window.findWindow("subWindow").destroyWindow().then((res) => {
  console.log("destroyWindow success")
  }).catch(() => {
  console.log("destroyWindow fail")
  })
  return true
  }
  
  build() {
  Row() {
  Column() {
  Text(this.message)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  }
  .width('100%')
  }
  .backgroundColor("#32ffffff") //组件背景，可以修改为#00000000透明
  .height('100%')
  }
  }