新拉起的页面是否可以设置成透明,通过背景透出后面的页面?

关于新拉起的Page是否可以设置成透明的问题,对应场景如下:EntryAbility.ets加载了第一个Page(Index.ets),在Index.ets中放置了一个Button,点击后通过“router.pushUrl({url: ‘pages/Second’})”启动第二个Page(Second.ets),在这个页面中只展示了固定区域的大小,我希望用户通过其他区域可以看到跳转之前的Index.ets,也就是希望第二个Page(Second.ets)的背景是透明的。

HarmonyOS
2024-10-14 11:37:25
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

Page可以设置opacity(0.01)来设置透明度但router.pushUrl({url: 'pages/Second'})后index页面会被替换掉,不会被看到,建议使用CustomDialog自定义弹窗来实现该功能

如果router.pushUrl这种方式是替换,无法做到遮挡在前一个页面上。这里可以有两种方式,可以满足您的要求

1)应用子窗口:开启子窗口后,会叠加在原有页面上面。针对“第二个页面叠加到第一个页面上方”可以选择。相关文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5

2)panel组件:可滑动面板,提供一种轻量的内容展示窗口,方便在不同尺寸中切换。针对“第二个Page设置成固定高度的半屏页面”可以选择。相关文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-panel-V5

子窗口透明参考如下demo:

// EntryAbility.ts  
export default class EntryAbility extends UIAbility {  
  ...  
  onWindowStageCreate(windowStage: window.WindowStage): void {  
    ...  
    AppStorage.setOrCreate("windowStage",windowStage)//保存windowStage  
    ...  
  }  
  ...  
}  
  
// 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  
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%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-14 17:34:45
相关问题
XComponent 怎么设置成透明
1895浏览 • 1回复 待解决
如何将AbilityUI界面设置成透明
2138浏览 • 1回复 待解决
HarmonyOS 如何设置Entry页面透明页面
541浏览 • 1回复 待解决
如何拉起设置蓝牙页面
2359浏览 • 2回复 待解决
如何设置卡片背景透明
2758浏览 • 1回复 待解决
openharmony怎么设置背景透明模糊?
6571浏览 • 1回复 待解决
HarmonyOS 如何对page页面设置透明
537浏览 • 1回复 待解决
HarmonyOS h5拉起系统扫码页面的demo
233浏览 • 1回复 待解决
如何将背景颜色设置透明
2657浏览 • 1回复 待解决