HarmonyOS bindContentCover的背景颜色透明度？

Question

页面需要pop弹出一个全屏的日历，全屏时的背景能看到上个页面的模糊图，透明度为0.2。但是没找到bindContentCover的背景颜色透明度设置在哪。

用了 .opacity(0.2)这个属性会导致整个页面全部透明了，现在只想让背景透明，其他控件不透明。

怎么才能实现透明背景颜色的效果。

Answer 1

如果想实现背景透明，其他控件不透明的效果，这边有两个推荐：

方案一：使用半模态转场 bindSheet 来实现，示例代码如下：

.bindSheet($$this.isShow, this.playLottieBuilder(), {
  height: -1,
  backgroundColor: '#80000000',
  onWillAppear: () => {console.log("BindSheet onWillAppear.")},
  onAppear: () => {console.log("BindSheet onAppear.")},
  onWillDisappear: () => {console.log("BindSheet onWillDisappear.")},
  onDisappear: () => {console.log("BindSheet onDisappear.")}
})

方案二：将 this.playLottieBuilder()的组件抽离成一个页面（TestOpenPage），将这个页面作为一个子窗口加载然后将子窗口设置为透明背景这样来实现背景半透明效果，伪代码如下：

1、EntryAbility.ts
export default class EntryAbility extends UIAbility {
  …
  onWindowStageCreate(windowStage: window.WindowStage): void {
    …
    AppStorage.setOrCreate("windowStage", windowStage)//保存windowStage
    …
  }
  …
}
2、rightPage.ets
import { window } from '@kit.ArkUI';
Text('弹出日历')
  .height(50)
  .onClick(() => {
    let windowStage_: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
    windowStage_.createSubWindow("subWindow", (err, win) => { //创建透明子窗口并打开
      win.setUIContent('pages/TestOpenPage');
      win.showWindow();
    })
  })
3、TestOpenPage.ets
import { window } from '@kit.ArkUI';

@Entry
@Component
struct TestOpenPage {
  @State message: string = 'TestOpenPage';

  aboutToAppear() {
    window.findWindow("subWindow").setWindowBackgroundColor("#99000000")//设置子窗口背景透明
  }

  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)
      }
      .height(300)
      .width('100%')
      .backgroundColor(Color.White)
    }
    .backgroundColor("#00000000")//组件背景，可以修改为#00000000透明
    .height('100%')
  }
}