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

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

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

HarmonyOS
2024-10-29 11:57:06
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

​参考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%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-29 17:36:28
相关问题
HarmonyOS 如何实现页面?
168浏览 • 1回复 待解决
如何展示一个广告
380浏览 • 1回复 待解决
HarmonyOS h5返回上一页面时会闪
316浏览 • 1回复 待解决
如何实现一个页面显示子窗口
545浏览 • 1回复 待解决
编写一个页面实现不规则列表
713浏览 • 1回复 待解决
编写一个页面,实现吸顶效果
978浏览 • 1回复 待解决
一个页面怎么实现多个AbilitySlice?
14179浏览 • 5回复 待解决
编译一个页面,实现选座场景
636浏览 • 1回复 待解决
如何新开一个半透明页面
241浏览 • 1回复 待解决
HarmonyOS 需要一个筛选页面的demo
228浏览 • 1回复 待解决