目录

如何设置PC窗口透明

问题现象

使用setWindowBackgroundColor设置窗口背景色后，仅在手机和平板设备上生效，请问如何设置PC窗口的背景色？

背景知识

setWindowBackgroundColor设置窗口的背景色。Stage模型下，该接口需要在loadContent()或setUIContent()调用生效后使用。
setWindowContainerColor设置主窗口容器在焦点态和非焦点态时的背景色。在Stage模型下，该接口需在调用loadContent()或setUIContent()后使用。
窗口容器背景色（setWindowContainerColor）覆盖整个窗口区域，包括标题栏和内容区域。当同时使用该接口和setWindowBackgroundColor设置背景色时，内容区域显示窗口背景色，标题栏显示窗口容器背景色。

解决方案

由于PC窗口存在标题栏，因此设置PC窗口透明背景色需要setWindowBackgroundColor与setWindowContainerColor搭配使用，setWindowContainerColor设置标题栏透明，setWindowBackgroundColor设置内容区域背景色透明，方可实现整个PC窗口透明效果。示例代码如下：

在module.json5中配置权限。

"requestPermissions": [
  {
    'name': "ohos.permission.SET_WINDOW_TRANSPARENT"
  }
],

给PC窗口设置透明色（'#00000000'）。

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  private message: string = 'Hello World';
  uiContext = this.getUIContext();

  // 在aboutToAppear()生命周期中设置PC窗口背景颜色
  aboutToAppear(): void {
    window.getLastWindow(this.uiContext?.getHostContext(), (err, data) => {
      try {
        data.setWindowBackgroundColor('#00000000');
        data.setWindowContainerColor('#00000000', '#FF000000');
      } catch (exception) {
        console.error(`Failed to set the background color. Cause code: ${exception.code}, message: ${exception.message}`);
      }
    });
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Page2HelloWorld')
        .fontSize(50)
        .fontColor(Color.White)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        });
    };
  }
}