HarmonyOS 鸿蒙Next 关于Page之间覆盖与透明的咨询

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 关于Page之间覆盖与透明的咨询

现在有pageA， 通过router跳转pageB。
现在想要实现的效果是， pageB的背景可以透明，即， 在pageB的界面，可以看到pageA的部分界面。
即， pageB的背景是透明的。

竞品参照，在Android中，可以配置 Activity的style来实现透明背景。
类似配置如下
深色代码主题
复制
<style name=“PreviewMediaActivityStyle” parent="@style/CommonTheme.BaseActivity.FullScreen">
<item name=“android:windowBackground”>@android:color/transparent</item>
<item name=“android:windowIsTranslucent”>true</item>
<item name=“windowNoTitle”>true</item>
<item name=“windowActionBar”>false</item>
<!-- <item name=“android:windowFullscreen”>true</item>
<item name=“android:windowContentOverlay”>@null</item>–>
<item name=“android:windowTranslucentNavigation”>true</item>
<item name=“android:navigationBarColor”>#00000000</item>
</style>
现在诉求是，鸿蒙如何实现该效果


更多关于HarmonyOS 鸿蒙Next 关于Page之间覆盖与透明的咨询的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

参考如下Demo：

// Page1.ets

深色代码主题
复制

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/Page2’);
win.showWindow();
})
})
}
.width(‘100%’)
}
.height(‘100%’)
.backgroundColor(Color.Pink)
}
}
深色代码主题
复制
// Page2.ets
深色代码主题
复制
import window from ‘@ohos.window’;


@Entry
@Component
struct Index {
@State message: string = ‘page 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
}


build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width(‘100%’)
.backgroundColor(Color.Red)
}
.alignItems(VerticalAlign.Top)
.height(‘100%’)
.backgroundColor("#80ffffff")
}
}

//注意需要在EntryAbility里面添加关键代码那一行

深色代码主题
复制
onWindowStageCreate(windowStage: window.WindowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x0000, ‘testTag’, ‘%{public}s’, ‘Ability onWindowStageCreate’);


windowStage.loadContent(‘pages/Page231206095213071’, (err, data) => {
if (err.code) {
hilog.error(0x0000, ‘testTag’, ‘Failed to load the content. Cause: %{public}s’, JSON.stringify(err) ?? ‘’);
return;
}
AppStorage.setAndLink(“windowStage”, windowStage);// 关键代码
hilog.info(0x0000, ‘testTag’, ‘Succeeded in loading the content. Data: %{public}s’, JSON.stringify(data) ?? ‘’);
});

更多关于HarmonyOS 鸿蒙Next 关于Page之间覆盖与透明的咨询的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，Page之间的覆盖与透明效果主要通过页面堆叠管理和视觉属性配置来实现。

页面覆盖通常涉及页面栈的管理。在鸿蒙系统中，页面以栈的形式进行管理，新页面推入栈顶时会覆盖旧页面。要控制页面覆盖行为，可以调整页面入栈和出栈的逻辑，确保页面按预期顺序显示。

至于页面透明效果，这通常与页面的背景色或透明度属性设置有关。在鸿蒙的页面布局文件中，可以通过设置组件的透明度属性（如alpha值）或背景色的透明度来控制页面的透明效果。此外，在页面代码中也可以通过修改对应视图组件的透明度属性来实现动态透明效果。

需要注意的是，页面覆盖与透明效果的实现可能受到页面布局、组件层级以及动画效果等多种因素的影响。因此，在开发过程中，应综合考虑这些因素，确保页面覆盖与透明效果符合预期。

如果在实际开发中遇到具体问题，如页面覆盖顺序不正确或透明效果不符合预期，可以检查页面栈管理逻辑、透明度属性设置以及布局文件等相关配置。若问题依旧无法解决，请联系官网客服。官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部