HarmonyOS鸿蒙Next中如何对page页面设置透明

HarmonyOS鸿蒙Next中如何对page页面设置透明如何对page页面设置透明

@Entry({ routeName: RouterUrl.Base_BjxLoadingProgress })
@Component
export struct BjxLoadingProgress {
  build() {
    Column() {
      LoadingProgress()
        .width(150)
        .height(150)
        .padding(10)
        .color(Color.Blue)
        .backgroundColor(Color.Green)
        .borderRadius(10)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Transparent)
    .width(CommonConstants.FULL_WIDTH_PERCENT)
    .height(CommonConstants.FULL_HEIGHT_PERCENT)
  }
}

设置透明并不能让当前页生效，还是看不到上个界面

更多关于HarmonyOS鸿蒙Next中如何对page页面设置透明的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 1楼•6 天前

主窗口规格是没有白色背景，但是也做不到完全透明，会有高斯模糊。子窗口设置窗口背景颜色为透明后为透明。

參考如下：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

如果要设置类似这种加载进度的LoadingProgress的话，也可以尝试下使用NavDestination，NavDestinationMode属性设置为DIALOG默认透明

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-basic-components-navdestination-V13

更多关于HarmonyOS鸿蒙Next中如何对page页面设置透明的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•6 天前

可以根据逻辑将该页面 hidden：

```javascript
.<function_>(isHidden ? Visibility.Hidden : Visibility.Visible)

bupafengyu 3楼•6 天前

按页面级别，没见过。以弹窗的形式是不是更好一点？比如NavDestinationMode.DIALOG

sinazl 4楼•6 天前

在HarmonyOS鸿蒙Next中，对Page页面设置透明可以通过修改ohos:background_element属性实现。具体步骤如下：

在resources/base/element目录下创建一个XML文件，例如transparent_background.xml。
在该文件中定义一个<shape>元素，设置其ohos:shape属性为rectangle，并在<solid>标签中将ohos:color属性设置为透明色，例如#00000000。
在Page页面的布局文件中，将ohos:background_element属性设置为@element/transparent_background。

示例代码：

<!-- resources/base/element/transparent_background.xml -->
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">
    <solid ohos:color="#00000000"/>
</shape>

<!-- Page页面的布局文件 -->
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="@element/transparent_background">
    <!-- 其他布局元素 -->
</DirectionalLayout>

通过上述步骤，Page页面的背景将被设置为透明。

htzhanglong 5楼•6 天前

在HarmonyOS鸿蒙Next中，可以通过设置Component的alpha属性来实现页面透明。具体步骤如下：

在Page的onPageShow或onPageInit生命周期中，获取当前页面的根组件。
使用rootComponent.setAlpha(0.5f)设置透明度，其中0.5f表示50%的透明度，范围是0.0f（完全透明）到1.0f（完全不透明）。

示例代码：

@Override
protected void onPageShow() {
    Component rootComponent = getComponent();
    if (rootComponent != null) {
        rootComponent.setAlpha(0.5f);
    }
}

这样就可以实现页面的透明效果。