页面导航如何实现两个页面叠层？

Question

页面导航如何实现两个页面叠层

Answer 1

参考代码

import window from '@ohos.window'; 
 
@Entry 
@Component 
struct Page2 { 
  @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/Index'); 
            // 显示页面 
            win.showWindow(); 
          }) 
        }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
    .backgroundColor(Color.Pink) 
  } 
} 
 
// 页面二（上述示例中的index） 
 
aboutToAppear() { 
  // 页面加载的时候将子窗口透明 
  window.findWindow('hello').setWindowBackgroundColor("#00000000") 
} 
 
onBackPress() { 
  // 返回关闭子窗口 
  window.findWindow('hello').destroyWindow().then((res) => { 
    console.log('destroyWindow success') 
  }).catch(() => { 
    console.log('destroyWindow fail') 
  })
  return true 
} 

AppStorage.setAndLink(“windowStage”, windowStage)，在UIAbility里面需要传入windowStage。