HarmonyOS 鸿蒙Next如何实现透明的page

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何实现透明的page

我想实现媒体页面拖拽关闭，效果是图片跟随手指拖动，并缩小，露出上一个页面，拖动到一定阈值关闭页面，我该如何实现

Harmonyos Next教程
2 回复

可以从路由方面入手，

router路由模式请参考下面demo：

// Page1.ets
import window from '[@ohos](/user/ohos).window';

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page2 {
 [@State](/user/State) message: string = 'page Page2';

 onPageHide() {
   console.log("pageHide")
 }

 build() {
   Row() {
     Column() {
       Text(this.message)
         .fontSize(50)
         .fontWeight(FontWeight.Bold)
       Button("pageB").onClick(() => {
         let windowStege: window.WindowStage = AppStorage.get("windowStage") as window.WindowStage;
         windowStege.createSubWindow("hello", (err, win) => {
           win.setUIContent('pages/Page2');
           win.showWindow();
         })
       })
     }
     .width('100%')
   }
   .height('100%')
   .backgroundColor(Color.Pink)
 }
}

NavDestination支持Dialog类型页面： https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navdestination-V5#navdestinationmode枚举说明-11

NavDestinationMode.STANDARD: 标准类型 NavDestinationMode.DIALOG: 默认透明。

您这边在demo中添加image拖拽事件时可以添加对应的逻辑

在HarmonyOS鸿蒙Next中，实现透明的page页面，可以通过以下步骤进行：

  1. 使用子窗口加载页面：在HarmonyOS中，由于router路由无法直接实现透明页面，因此需要借助拉起子窗口的方案。通过windowStage.createSubWindow方法创建一个子窗口，并加载对应的页面内容。
  2. 设置子窗口背景透明：在子窗口加载页面后，使用setWindowBackgroundColor方法将子窗口的背景色设置为透明。透明颜色的十六进制代码为#00000000。
  3. 处理页面交互与返回：由于子窗口与主窗口的事件交互受限，需要自行监听页面的返回手势等事件，并在适当的时候销毁子窗口以实现回到原页面的效果。

需要注意的是，在实现透明页面的过程中，可能会遇到一些技术难题，如页面持久化、参数传递等。这些都需要根据具体的应用场景进行细致的处理。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部