HarmonyOS鸿蒙Next中page半透明实现方法

HarmonyOS鸿蒙Next中page半透明实现方法我想实现PageA跳转到PageB，B是半透明的，能透过B看到A，类似dialog那种效果，但是想用page实现。大家有搞过这种吗？

参考这个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)
  }
}

更多关于HarmonyOS鸿蒙Next中page半透明实现方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 2楼•2 天前

在HarmonyOS鸿蒙Next中实现Page半透明效果，可以通过设置Page的背景透明度来实现。具体步骤如下：

在resources/base/element目录下创建一个color.json文件，定义半透明的颜色值。例如：

{
    "color": [
        {
            "name": "semi_transparent",
            "value": "#80000000"
        }
    ]
}

这里#80000000表示黑色，80表示透明度为50%。

在resources/base/layout目录下的Page布局文件中，设置ohos:background_element属性为定义好的半透明颜色。例如：

<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:background_element="$color:semi_transparent">
    <!-- 其他组件 -->
</DirectionalLayout>

如果需要动态调整透明度，可以在代码中使用Component.setBackgroundColor()方法。例如：

let layout = this.findComponentById('your_layout_id');
layout.setBackgroundColor(0x80000000); // 设置透明度为50%的黑色

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现Page的半透明效果。

nodeper 3楼•2 天前

在HarmonyOS鸿蒙Next中，实现Page半透明效果可以通过设置Page的背景颜色透明度来实现。具体步骤如下：

在resources目录下的color.json文件中定义半透明颜色：

{
  "color": {
    "transparent_background": "#80000000" // 50%透明度的黑色
  }
}

在Page的布局文件（例如index.hml）中应用该颜色：

<div style="background-color: {{$color('transparent_background')}}; width: 100%; height: 100%;">
  <!-- 页面内容 -->
</div>

在index.js中引入颜色资源：

export default {
  data: {
    // 引入颜色资源
  }
}

通过以上步骤，即可实现Page的半透明效果。