HarmonyOS 鸿蒙Next如何设置半透明页面

【问题描述】

目前有需求实现一个类似底部弹窗形式的登录页面，高度不充满整个屏幕，未填充的区域半透明可见底部页面内容。登录页面需要走路由管理，不能通过弹窗实现。此场景如何实现半透明背景页面呢？

示例代码如下：

import router from ‘@ohos.router’;

@Entry
@Component
struct Index {
build() {
Column() {
Text(‘点击跳转登录页面’)
.height(52)
.width(‘100%’)
.margin({top: 100})
.backgroundColor(’#fafafc’)
.textAlign(TextAlign.Center)
.onClick(() => {
router.pushUrl({url: ‘pages/Second’})
})
}
.height(‘100%’)
.width(‘100%’)
}
}
@Entry({ routeName: ‘Second’ })
@Component
export struct Second {
build() {
Column() {
List() {
ListItem() {
Text(‘AAAAAAAAAA’)
}.height(52)
}
.width(‘100%’)
.height(500)
.backgroundColor(’#00ff00’)
}
.justifyContent(FlexAlign.End)
.width(‘100%’)
.height(‘100%’)
.backgroundColor(’#00ffffff’)
.opacity(0.1)
}
} 

【解决方案】

使用@ohos.arkui.componentSnapshot库，获取屏幕截图pixelMap后，通过全局变量传参，将当前屏幕截图作为登录页面背景图来实现伪透明效果。