HarmonyOS 如何实现页面是一个半屏页面，上半部分可看到上一页的内容？

Question

A页面是一个半屏页面，由第三方开发；B页面也是一个半屏页面，有我开发；C页面是一个全屏页面由第三方开发。

如何实现一个半屏的B页面，上半屏为半透明。让A页面接入最为简单(因为是三方开发)，可以实现A跳转到B，B可以跳转到C。可以有哪些思路？

Answer 1

参考demo:

//启动页

import { router } from '@kit.ArkUI' 
@Entry 
@Component 
struct RunABC{ 
  build() { 
    Column(){ 
      Text('点击跳转页面A') 
        .onClick(()=>{ 
          router.pushUrl({ 
            url:'pages/panel/PageA' 
          }) 
 
        }) 
    } 
  } 
}

//页面A

import { router } from '@kit.ArkUI' 
@Entry 
@Component 
export struct PageA{ 
  build() { 
    Stack(){ 
      Stack(){ 
        Column(){ 
          Text('点击PageA，跳转到页面B') 
            .onClick(()=>{ 
              router.pushUrl({ 
                url:'pages/panel/PageB' 
              }) 
            }) 
        }.backgroundColor(Color.Red).borderRadius(24) 
      }.backgroundColor(Color.Green) 
      .width('100%') 
      .height('50%') 
    } 
  } 
}

//页面B

import { PageA } from './PageA' 
import { router } from '@kit.ArkUI' 
@Entry 
@Component 
struct PageB{ 
  build() { 
    Column(){ 
      //上半屏半透明，显示页面A 
      Stack(){ 
        PageA().width('100%') 
        Column(){ 
          Text('点击页面B随意处，跳转页面C') 
        }.height('50%').width('80%').opacity(0.5).backgroundColor(Color.Blue) 
        .onClick(()=>{ 
          router.pushUrl({ 
            url:'pages/panel/PageC' 
          }) 
        }) 
      } 
    } 
  } 
}

//页面C

@Entry 
@Component 
struct PageC{ 
  build() { 
    Column(){ 
      Text('页面C') 
    } 
    .backgroundColor(Color.Red) 
    .height('100%') 
    .width('100%') 
  } 
}