HarmonyOS 如何对page页面设置透明？

Question

@Entry({routeName:RouterUrl.Base_BjxLoadingProgress}) 
@Component 
export struct BjxLoadingProgress{ 
  build() { 
    Column(){ 
      LoadingProgress() 
        .width(150) 
        .height(150) 
        .padding(10) 
        .color(Color.Blue) 
        .backgroundColor(Color.Green) 
        .borderRadius(10) 
    } 
    .justifyContent(FlexAlign.Center) 
    .backgroundColor(Color.Transparent) 
    .width(CommonConstants.FULL_WIDTH_PERCENT) 
    .height(CommonConstants.FULL_HEIGHT_PERCENT) 
  } 
}

设置透明并不能让当前页生效，还是看不到上个界面

Answer 1

主窗口规格是没有白色背景，但是也做不到完全透明，会有高斯模糊。子窗口设置窗口背景颜色为透明后为透明。參考如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5\#setwindowbackgroundcolor9

如果要设置类似这种加载进度的LoadingProgress的话，也可以尝试下使用NavDestination，NavDestinationMode属性设置为DIALOG默认透明https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5

可以尝试直接在EntryAbility中添加

onWindowStageCreate(windowStage: window.WindowStage): void { 
  // Main window is created, set main page for this abilitydata.setWindowBackgroundColor('#00ff33') 
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
  AppStorage.setAndLink('windowStage', windowStage);// 关键代码 
  windowStage.loadContent('pages/Index', (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) ?? ''); 
windowStage.getMainWindowSync().setWindowBackgroundColor('#00ff33') 
}); 
}

其次如果直接在page中也可以

@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  build() { 
    Stack(){ 
      Row(){ 
        Text('我是下面的Row').fontSize(40) 
      }.height('80%').width('80%').backgroundColor(Color.Gray) 
      Column(){ 
        Text('我是上面的Column').fontSize(40) 
      }.height('60%').width('60%').backgroundColor("#52dd3f3f") 
    }.width('100%').height('100%') 
  } 
}