OpenHarmony实战开发-如何实现页面间共享组件。

介绍

本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。

效果图预览

使用说明

页面间共享地图组件的场景：

• 使用地图组件替换代码中模拟的地图组件。
• 添加新页面，需要预留地图组件的显示区域。

其他组件实例共享的场景：

• 参考实现思路即可。

实现思路

场景：组件实例页面间共享

本示例实现模拟的地图组件实例在两个页面间共享。

• 通过Stack容器，下层放地图组件，上层放Navigation组件管理两个页面，且需要设置Navigation组件的事件透传到地图组件。

build() {
   
    Stack({
   alignContent: Alignment.Bottom}) {
   
      // 地图组件放在底层，navigation组件放在上层，navigation中的页面需要显示地图组件的位置处设置透明和事件透传
      MapComponent()
      // 应用主页用NavDestination承载，Navigation为空页面直接跳转到MainPage主页面
      Navigation(this.pageStackForComponentSharedPages) {
   
      }
      .onAppear(()=>{
   
        this.pageStackForComponentSharedPages.pushPathByName("MainPage"