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

关于新拉起的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%')  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
分享
微博
QQ
微信
回复
2024-10-14 17:34:45


相关问题
XComponent 怎么设置成透明
2454浏览 • 1回复 待解决
HarmonyOS 可以设置页面透明背景吗?
1078浏览 • 1回复 待解决
如何将AbilityUI界面设置成透明
2673浏览 • 1回复 待解决
HarmonyOS 如何设置页面背景透明
763浏览 • 1回复 待解决
如何设置透明页面
590浏览 • 1回复 待解决
HarmonyOS 如何设置Entry页面透明页面
1119浏览 • 1回复 待解决
如何拉起设置蓝牙页面
3002浏览 • 2回复 待解决
HarmonyOS 页面透明设置
555浏览 • 1回复 待解决
HarmonyOS 页面如何将背景处理为透明
826浏览 • 1回复 待解决
HarmonyOS 子窗口要如何设置成横屏
768浏览 • 1回复 待解决
HarmonyOS 页面透明可以如何实现
1234浏览 • 1回复 待解决
openharmony怎么设置背景透明模糊?
7599浏览 • 1回复 待解决
HarmonyOS UIAbility如何设置透明背景
778浏览 • 1回复 待解决